/* General Body Styles */
body {
    font-family: 'Inter', sans-serif;
    /* Dark background for a premium feel */
    background-color: #0d0d0d;
    color: #e0e0e0;
}

/* Hero Gradient Background (used in index.html, index_adult.html, my-bentbucks.html, funding.html) */
.hero-gradient {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.7) 0%, rgba(51, 14, 47, 0.7) 50%, rgba(26, 26, 26, 0.7) 100%), url('https://bentbucks-public.s3.us-east-1.amazonaws.com/assets/images/digital_wallet_2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Specific hero-gradient for funding.html and index_adult.html (without image overlay) */
/* Note: If these are meant to override the above, ensure proper loading order or specificity. */
/* For a common CSS, it's better to define distinct classes if the intent is different. */
/* Assuming the image overlay is the primary for most pages, this might be a specific use case. */
/* If this gradient is intended to be used on pages without the image, it should have a different class name. */
/* For now, I'm keeping it as is, but be aware of potential conflicts if applied widely. */
.hero-gradient-no-image { /* Added a new class for clarity */
    background: linear-gradient(135deg, #1a1a1a 0%, #330e2f 50%, #1a1a1a 100%);
}


/* Primary Button Styles (converted from @apply for CDN compatibility) */
.btn-primary {
    background-color: #8b5cf6; /* bg-purple-700 */
    color: #ffffff; /* text-white */
    font-weight: 600; /* font-semibold */
    padding: 0.75rem 2rem; /* py-3 px-8 */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition-property: all; /* transition-all */
    transition-duration: 300ms; /* duration-300 */
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */
    transform: scale(1); /* initial transform */
}
.btn-primary:hover {
    background-color: #7c3aed; /* hover:bg-purple-800 */
    transform: scale(1.05); /* hover:scale-105 */
}

/* Secondary Button Styles (converted from @apply for CDN compatibility) */
.btn-secondary {
    background-color: #4b5563; /* bg-gray-700 */
    color: #ffffff; /* text-white */
    font-weight: 600; /* font-semibold */
    padding: 0.75rem 2rem; /* py-3 px-8 */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition-property: all; /* transition-all */
    transition-duration: 300ms; /* duration-300 */
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */
    transform: scale(1); /* initial transform */
}
.btn-secondary:hover {
    background-color: #374151; /* hover:bg-gray-600 */
    transform: scale(1.05); /* hover:scale-105 */
}

/* Payment Option Card Styles (from funding.html) */
.payment-option-card {
    background-color: #1f2937; /* bg-gray-900 */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition-property: all; /* transition-all */
    transition-duration: 300ms; /* duration-300 */
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */
    transform: scale(1); /* initial transform */
    border: 1px solid transparent; /* border border-transparent */
}
.payment-option-card:hover {
    transform: scale(1.05); /* hover:scale-105 */
    background-color: rgba(109, 40, 217, 0.5); /* hover:bg-purple-900 hover:bg-opacity-50 */
    border-color: #8b5cf6; /* hover:border-purple-700 */
}
.payment-option-card.selected {
    border-color: #a78bfa; /* border-purple-500 */
    background-color: rgba(109, 40, 217, 0.7); /* bg-purple-900 bg-opacity-70 */
    transform: scale(1.05); /* scale-105 */
}

/* Side menu specific styles (from contact.html, faq.html, identity-verification.html, privacy-policy.html, terms.html) */
.side-menu {
    transition: transform 0.3s ease-in-out;
}
.side-menu.hidden {
    transform: translateX(100%);
}
.side-menu.flex {
    transform: translateX(0);
}
.overlay {
    transition: opacity 0.3s ease-in-out;
}
.overlay.hidden {
    opacity: 0;
    pointer-events: none; /* Allows clicks to pass through when hidden */
}
.overlay.block {
    opacity: 0.5;
    pointer-events: auto;
}