/* =========================================================
   Zakat Calculator - Islamic mosque themed stylesheet.
   Sections in order:
     1. Reset / base typography
     2. Background layers (.mosque-bg + .overlay)
     3. Layout container + header
     4. Card components (gold-price / form / formula / result)
     5. Form inputs + buttons
     6. Result display
     7. Footer
     8. Responsive breakpoints
   ========================================================= */

/* ---------- 1. Reset & base ---------- */
/* Universal reset so margins/padding start from zero and box-sizing is predictable. */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Full-height page so the background gradient fills the viewport even when content is short. */
html, body {
    min-height: 100%;
    font-family: "Segoe UI", "Amiri", "Times New Roman", serif;
    color: #1b2b2a;
    background: #0b2027; /* Fallback color before gradients load */
}

/* ---------- 2. Background layers ---------- */
/* Fixed, full-screen layer behind everything. Uses layered radial + linear gradients to evoke a desert sunset sky. */
.mosque-bg {
    position: fixed;
    inset: 0;              /* top:0 right:0 bottom:0 left:0 shortcut */
    z-index: -2;           /* Behind everything */
    background:
        radial-gradient(ellipse at top, #f4d58d 0%, #d4a857 35%, #7a4b1e 70%, #1a2a3a 100%),
        linear-gradient(180deg, #f8e4b7 0%, #c88a3a 40%, #3b2a1a 100%);
    background-size: cover;
    background-repeat: no-repeat;
}

/*
  ::after pseudo-element layers a mosque silhouette on top of the gradient.
  The silhouette lives as a standalone SVG under /static/images/ so it can
  be cached independently, version-controlled cleanly, and reused elsewhere.
*/
.mosque-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/images/mosque-silhouette.svg");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    opacity: 0.9;
}

/* Dark gradient overlay improves text contrast over the sunset background. */
.overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(11,32,39,0.35) 0%, rgba(11,32,39,0.75) 100%);
}

/* ---------- 3. Main container & header ---------- */
/* Centered, max-width column so content stays readable on wide monitors. */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

.header {
    text-align: center;
    color: #fff8e7;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 6px rgba(0,0,0,0.45); /* Soft shadow boosts readability over bright background */
}

.crescent {
    font-size: 2.5rem;
    color: #ffd166;
    margin-bottom: 0.25rem;
}

/* clamp() makes the heading responsive: min 1.8rem, preferred 3.5vw, max 2.6rem. */
.header h1 {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    letter-spacing: 1px;
    font-weight: 700;
}

.tagline {
    font-size: 1rem;
    color: #f6e7c1;
    margin-top: 0.25rem;
}

/* ---------- 4. Card components ---------- */
/*
  Shared card styling for the gold price, form, formula, and result cards.
  Semi-transparent cream background + subtle gold border gives a parchment feel.
*/
.gold-price-card,
.zakat-form,
.formula-card,
.result-card {
    background: rgba(255, 251, 240, 0.94);
    border: 1px solid rgba(198, 160, 85, 0.6);
    border-radius: 14px;
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
    backdrop-filter: blur(4px); /* Frosted-glass effect on browsers that support it */
}

/* Shared card heading style - dashed underline adds an ornamental feel. */
.gold-price-card h2,
.formula-card h2,
.result-card h2 {
    color: #8a5a1b;
    margin-bottom: 0.8rem;
    font-size: 1.2rem;
    border-bottom: 1px dashed rgba(138, 90, 27, 0.4);
    padding-bottom: 0.4rem;
}

/* 3-column grid for the three gold price values (ounce / gram / vori). */
.price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    margin-bottom: 0.5rem;
}

/* Each price box: gold-toned gradient background, rounded corners. */
.price-grid > div {
    display: flex;
    flex-direction: column;
    padding: 0.7rem 0.8rem;
    background: linear-gradient(135deg, #fff5d6, #f1d89a);
    border-radius: 10px;
    border: 1px solid rgba(138, 90, 27, 0.25);
}

.price-grid .label {
    font-size: 0.78rem;
    color: #6d4a15;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.price-grid .value {
    font-size: 1.15rem;
    font-weight: 700;
    color: #3a2510;
    margin-top: 0.15rem;
}

/* Price source text (shown under the grid - e.g. "Source: ..., Updated: ..."). */
.source {
    color: #5a4321;
    font-style: italic;
    font-size: 0.78rem;
}

/* ---------- 5. Form inputs & buttons ---------- */
/* Each .field stacks its label and input vertically. */
.zakat-form .field {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.zakat-form label {
    font-weight: 600;
    color: #3a2510;
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
}

.zakat-form input[type="number"],
.zakat-form select {
    padding: 0.7rem 0.85rem;
    border: 1px solid #c6a055;
    border-radius: 10px;
    font-size: 1rem;
    background: #fffef8;
    color: #3a2510;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Focus ring: removes default browser outline and adds a warm gold glow. */
.zakat-form input[type="number"]:focus,
.zakat-form select:focus {
    outline: none;
    border-color: #8a5a1b;
    box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.4);
}

/*
  Gold input wrapper: puts the number field next to the unit dropdown on
  the same row. The input flex-grows; the select has a fixed width.
*/
.input-with-unit {
    display: flex;
    gap: 0.5rem;
}
.input-with-unit input[type="number"] { flex: 1; min-width: 0; }
.input-with-unit select { flex: 0 0 auto; min-width: 110px; cursor: pointer; }

/* Small hint text (e.g. "1 vori ≈ 11.664 grams"). */
.hint {
    color: #6d4a15;
    font-size: 0.78rem;
    margin-top: 0.25rem;
}

/* Button row: wraps to multiple lines on narrow screens. */
.actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

/* Shared button base. */
.btn-primary,
.btn-secondary {
    padding: 0.75rem 1.4rem;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.2s, background 0.2s;
}

/* Primary CTA (submit): gold gradient, lifts slightly on hover. */
.btn-primary {
    background: linear-gradient(135deg, #8a5a1b, #c6a055);
    color: #fff8e7;
    box-shadow: 0 4px 10px rgba(138,90,27,0.35);
}

.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(138,90,27,0.45); }

/* Secondary (reset): muted tan. */
.btn-secondary {
    background: #ede0c4;
    color: #3a2510;
    border: 1px solid #c6a055;
}

.btn-secondary:hover { background: #e2d2a8; }

/* ---------- Formula reference card ---------- */
.formula-card ul {
    list-style: none;
    padding-left: 0;
}

.formula-card li {
    padding: 0.35rem 0;
    border-bottom: 1px dashed rgba(138, 90, 27, 0.2);
    font-size: 0.95rem;
    color: #3a2510;
}

.formula-card li:last-child { border-bottom: none; }

/* ---------- 6. Result display ---------- */
/* The .hidden helper class is added/removed by script.js to show/hide elements. */
.result-card.hidden,
.result-row.hidden,
.result-total.hidden,
.empty-message.hidden { display: none; }

/* Friendly fallback when the user submits with no values entered. */
.empty-message {
    color: #6d4a15;
    font-style: italic;
    padding: 0.5rem 0;
}

.result-row {
    padding: 0.7rem 0;
    border-bottom: 1px dashed rgba(138, 90, 27, 0.25);
}

.result-row h3 {
    color: #8a5a1b;
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
}

.result-row p {
    color: #3a2510;
    font-size: 0.95rem;
    margin: 0.2rem 0;
}

/* Highlight box for grand totals (bottom of the result card). */
.result-total {
    margin-top: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, #fff5d6, #f1d89a);
    border-radius: 10px;
    border: 1px solid rgba(138, 90, 27, 0.35);
}

.result-total .grand {
    font-size: 1.05rem;
    color: #3a2510;
    margin: 0.25rem 0;
}

/* The final "Grand Total Zakat Due" line stands out in deep red. */
.result-total .highlight strong {
    color: #8a2b1b;
    font-size: 1.25rem;
}

/* ---------- 7. Footer ---------- */
.footer {
    text-align: center;
    color: #f6e7c1;
    margin-top: 1.5rem;
    font-style: italic;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* ---------- 8. Responsive breakpoints ---------- */
/*
  On screens 640px wide or less (phones), stack the price grid into a single
  column, tighten padding, and make buttons full width for easy tapping.
*/
@media (max-width: 640px) {
    .price-grid { grid-template-columns: 1fr; }
    .container { padding: 1.25rem 0.75rem 2rem; }
    .gold-price-card, .zakat-form, .formula-card, .result-card { padding: 1.1rem; }
    .actions { flex-direction: column; }
    .btn-primary, .btn-secondary { width: 100%; }
}