/* Custom Styles */

/* Solid color background matching header */
body {
    background: linear-gradient(135deg, #E0F2F1 0%, #B2DFDB 50%, #80CBC4 100%);
    /* Teal gradient background - light to medium teal shades */
    min-height: 100vh;
}

/* Semi-transparent cards with backdrop blur for glassmorphism effect */
.max-w-md.bg-white,
.max-w-lg.bg-white {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Semi-transparent sections */
section.bg-white {
    background-color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Footer with slight transparency */
footer.bg-white {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Decorative Background Pattern - keeping this but making it subtle or removing if it conflicts */
.bg-pattern {
    background-color: transparent;
    /* Ensure it doesn't block the image */
    background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Category Button Active State */
.category-btn.active {
    background-color: #e0f2fe;
    /* sky-100 */
    border-color: #0ea5e9;
    /* sky-500 */
    color: #0284c7;
    /* sky-600 */
}

/* Fade out animation for deleted items */
@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
    opacity: 0;
        transform: translateX(100%);
    }
}

.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

/* Collapsible Section Transition */
.collapsible-content {
    max-height: 500px;
    /* Arbitrary large height */
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease;
    opacity: 1;
}

.collapsible-content.collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
}

/* Chevron Rotation */
#travel-info-chevron,
#exchange-rate-chevron {
    transition: transform 0.3s ease;
}

.chevron-rotated {
    transform: rotate(-180deg);
}

/* Header Gradient Text (Optional enhancement) */
#header-title {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Button Active Press Effect */
button:active {
    transform: scale(0.98);
}

/* Primary Button Shadow */
.bg-primary {
    box-shadow: 0 4px 6px -1px rgba(20, 184, 166, 0.4), 0 2px 4px -1px rgba(20, 184, 166, 0.2);
}

/* Input Focus Ring Customization */
.input-outline {
    position: relative;
    border-radius: 0.375rem;
    /* rounded-md */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.input-outline__field {
    display: block;
    width: 100%;
    border-radius: 0.375rem;
    border-width: 1px;
    border-color: #d1d5db;
    /* gray-300 */
    padding: 0.5rem 0.75rem;
    /* py-2 px-3 */
    color: #1f2937;
    /* gray-900 */
    background-color: #ffffff;
    /* white */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease-in-out;
}

.input-outline__field:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #14B8A6;
    /* primary */
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2);
    /* ring-primary/20 */
}

/* Addon styling for inputs with units */
.input-outline--with-addon {
    display: flex;
    align-items: center;
}

.input-outline--with-addon .input-outline__field {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-width: 0;
}

.input-outline__addon {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-width: 1px;
    border-color: #d1d5db;
    /* gray-300 */
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    background-color: #f9fafb;
    /* gray-50 */
    color: #6b7280;
    /* gray-500 */
    font-size: 0.875rem;
    /* text-sm */
}

/* Modal Animation */
#modal-content {
    animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalPop {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Delete Button No Shadow */
.delete-btn {
    box-shadow: none !important;
}