/* ===== Brand palette (from Alhan Alfarah logo) ===== */

:root {
    --aa-gold: #B08D57;
    --aa-gold-dark: #8F7043;
    --aa-gold-deep: #6E5530;
    --aa-cream: #FDF5EB;
    --aa-cream-soft: #F7EBD8;
    --aa-olive: #9B946E;
    --aa-rose: #D6A597;
    --aa-ink: #3D3428;
    --aa-ink-soft: #5C4F3D;
    --aa-nav: #2C2419;
    --aa-nav-border: #4A3D2C;

    --aa-primary: var(--aa-gold-dark);
    --aa-accent: var(--aa-gold);

    /* Replace Bootstrap default blue with brand gold */
    --bs-primary: #8F7043;
    --bs-primary-rgb: 143, 112, 67;
    --bs-link-color: #8F7043;
    --bs-link-hover-color: #6E5530;
    --bs-link-color-rgb: 143, 112, 67;
    --bs-focus-ring-color: rgba(143, 112, 67, 0.35);
    --bs-body-color: #3D3428;
    --bs-body-bg: #FDF5EB;
    --bs-border-color: #E4D5C0;
    --bs-secondary-color: #5C4F3D;
}

body {
    background-color: var(--aa-cream);
    background-image:
        radial-gradient(ellipse at top, rgba(176, 141, 87, 0.08), transparent 55%),
        linear-gradient(180deg, var(--aa-cream) 0%, #F8EFE3 100%);
    color: var(--aa-ink);
    font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand span,
.display-6 {
    font-family: "Amiri", "Noto Naskh Arabic", Georgia, serif;
    letter-spacing: 0.01em;
}

/* Primary buttons: readable contrast on gold-bronze */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--aa-gold-dark);
    --bs-btn-border-color: var(--aa-gold-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--aa-gold-deep);
    --bs-btn-hover-border-color: var(--aa-gold-deep);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--aa-gold-deep);
    --bs-btn-active-border-color: var(--aa-gold-deep);
    --bs-btn-disabled-bg: var(--aa-gold);
    --bs-btn-disabled-border-color: var(--aa-gold);
}

.btn-outline-primary {
    --bs-btn-color: var(--aa-gold-dark);
    --bs-btn-border-color: var(--aa-gold);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--aa-gold-dark);
    --bs-btn-hover-border-color: var(--aa-gold-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--aa-gold-deep);
    --bs-btn-active-border-color: var(--aa-gold-deep);
}

.btn-warning {
    --bs-btn-color: var(--aa-ink);
    --bs-btn-bg: var(--aa-gold);
    --bs-btn-border-color: var(--aa-gold);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--aa-gold-dark);
    --bs-btn-hover-border-color: var(--aa-gold-dark);
    --bs-btn-active-bg: var(--aa-gold-deep);
    --bs-btn-active-border-color: var(--aa-gold-deep);
    --bs-btn-active-color: #fff;
}

.text-primary {
    color: var(--aa-gold-dark) !important;
}

.text-bg-primary {
    background-color: var(--aa-gold-dark) !important;
}

.badge.bg-primary,
.bg-primary {
    background-color: var(--aa-gold-dark) !important;
}

/* Slim ads bar above main nav */
.ads-topbar {
    background: linear-gradient(90deg, var(--aa-gold-deep), var(--aa-gold), var(--aa-olive));
    color: #fff;
    font-size: 0.85rem;
    padding: 0.4rem 0;
    text-align: center;
}

.ads-topbar a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ads-topbar a:hover {
    color: var(--aa-cream);
}

.ads-topbar-sep {
    opacity: 0.7;
    margin: 0 0.65rem;
}

/* Main navigation */
.site-navbar {
    background: var(--aa-nav) !important;
    border-bottom: 1px solid var(--aa-nav-border);
}

.site-navbar .navbar-brand img {
    border-radius: 50%;
    background: var(--aa-cream);
    object-fit: cover;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus {
    color: var(--aa-gold) !important;
}

.site-footer {
    background: var(--aa-nav) !important;
    border-top: 1px solid var(--aa-nav-border);
}

.site-footer img {
    border-radius: 50%;
    background: var(--aa-cream);
    object-fit: cover;
}

.site-footer .text-secondary {
    color: #C4B59A !important;
}

/* Home hero */
.home-hero {
    background:
        linear-gradient(135deg, rgba(44, 36, 25, 0.88), rgba(143, 112, 67, 0.82)),
        radial-gradient(circle at 20% 20%, rgba(214, 165, 151, 0.35), transparent 50%),
        linear-gradient(135deg, var(--aa-gold-deep), var(--aa-olive));
    color: #fff;
    border: 1px solid rgba(176, 141, 87, 0.35);
    position: relative;
    overflow: hidden;
}

.home-hero::after {
    content: "";
    position: absolute;
    inset: auto -10% -40% auto;
    width: 18rem;
    height: 18rem;
    background: radial-gradient(circle, rgba(253, 245, 235, 0.18), transparent 65%);
    pointer-events: none;
}

.home-hero .lead {
    color: rgba(253, 245, 235, 0.92);
    max-width: 36rem;
}

/* Cards used for songs and packages */
.item-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    height: 100%;
    background: #fff;
    border-color: var(--bs-border-color);
}

.item-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.65rem 1.25rem rgba(61, 52, 40, 0.1);
    border-color: var(--aa-gold);
}

.item-card .card-title {
    font-size: 1.05rem;
}

/* Price badges keep numbers readable in both directions */
[data-usd] {
    unicode-bidi: plaintext;
    white-space: nowrap;
}

/* Favorite (heart) button */
.favorite-btn {
    border: none;
    background: transparent;
    color: #b85c5c;
    font-size: 1.2rem;
    line-height: 1;
}

/* Package cover placeholder */
.cover-placeholder {
    background: linear-gradient(135deg, var(--aa-gold-dark), var(--aa-olive));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    aspect-ratio: 16 / 9;
}

.card-img-top.package-cover {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.accordion-button:not(.collapsed) {
    background-color: var(--aa-cream-soft);
    color: var(--aa-ink);
    box-shadow: inset 0 -1px 0 var(--bs-border-color);
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(143, 112, 67, 0.25);
}

/* Filter sidebar collapses above the list on small screens */
@media (max-width: 991.98px) {
    .filter-sidebar {
        margin-bottom: 1rem;
    }
}

/* Make table text wrap nicely on very small screens */
@media (max-width: 575.98px) {
    main.container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .ads-topbar {
        font-size: 0.78rem;
        padding: 0.35rem 0.5rem;
    }

    .ads-topbar-sep {
        margin: 0 0.35rem;
    }
}

#coupon-code-input {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}