/* ═══════════════════════════════════════════════════════════════════════
   GCC VAT & Zakat Calculator Pro — Stylesheet
   Design: Luxury Arabic-inspired with gold & deep navy palette
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────────────────── */
.gvzp-wrap {
    --gvzp-navy:     #0f1b2d;
    --gvzp-gold:     #c8a04a;
    --gvzp-gold-lt:  #e8c96a;
    --gvzp-gold-dk:  #9a7530;
    --gvzp-cream:    #fdf8ef;
    --gvzp-white:    #ffffff;
    --gvzp-gray-100: #f5f4f0;
    --gvzp-gray-200: #e8e5dd;
    --gvzp-gray-500: #8b8577;
    --gvzp-gray-700: #4a463e;
    --gvzp-green:    #2d7a4f;
    --gvzp-red:      #b03030;
    --gvzp-shadow:   0 4px 24px rgba(15,27,45,0.12);
    --gvzp-radius:   12px;
    --gvzp-font:     'Georgia', 'Times New Roman', serif;
    --gvzp-mono:     'Courier New', monospace;
    --gvzp-trans:    0.25s ease;

    --gvzp-bg:       var(--gvzp-cream);
    --gvzp-text:     var(--gvzp-navy);
    --gvzp-border:   var(--gvzp-gray-200);
    --gvzp-card-bg:  var(--gvzp-white);
    --gvzp-input-bg: var(--gvzp-white);
}

/* Dark theme overrides */
.gvzp-wrap.gvzp-theme-dark {
    --gvzp-bg:       #0a1525;
    --gvzp-text:     #e8dfc8;
    --gvzp-border:   #1e3050;
    --gvzp-card-bg:  #0f1e35;
    --gvzp-input-bg: #0c1a2e;
    --gvzp-gray-100: #111e33;
    --gvzp-gray-200: #182840;
    --gvzp-gray-500: #6a7f9a;
    --gvzp-gray-700: #a0b0c8;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
.gvzp-wrap {
    font-family:    var(--gvzp-font);
    background:     var(--gvzp-bg);
    color:          var(--gvzp-text);
    border-radius:  var(--gvzp-radius);
    box-shadow:     var(--gvzp-shadow);
    overflow:       hidden;
    max-width:      900px;
    margin:         2rem auto;
    border:         1px solid var(--gvzp-border);
    position:       relative;
}

/* ── Header ────────────────────────────────────────────────────────────── */
.gvzp-header {
    background:     linear-gradient(135deg, var(--gvzp-navy) 0%, #1a2f4e 100%);
    padding:        2rem 2.5rem;
    position:       relative;
    overflow:       hidden;
}
.gvzp-header::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c8a04a' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.gvzp-header-inner { position: relative; z-index: 1; }
.gvzp-title {
    color:       var(--gvzp-gold);
    font-size:   1.6rem;
    font-weight: 700;
    margin:      0 0 0.25rem;
    display:     flex;
    align-items: center;
    gap:         0.6rem;
    letter-spacing: 0.02em;
}
.gvzp-icon { font-size: 1.4rem; }
.gvzp-badge {
    background:     var(--gvzp-gold);
    color:          var(--gvzp-navy);
    font-size:      0.6rem;
    font-weight:    800;
    letter-spacing: 0.12em;
    padding:        0.15em 0.5em;
    border-radius:  4px;
    vertical-align: middle;
    font-family:    Arial, sans-serif;
}
.gvzp-subtitle {
    color:       rgba(200,160,74,0.7);
    font-size:   0.85rem;
    margin:      0;
    font-style:  italic;
}

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.gvzp-tabs {
    display:          flex;
    background:       var(--gvzp-gray-100);
    border-bottom:    1px solid var(--gvzp-border);
    overflow-x:       auto;
    scrollbar-width:  none;
}
.gvzp-tabs::-webkit-scrollbar { display: none; }
.gvzp-tab {
    flex:             0 0 auto;
    padding:          0.8rem 1.4rem;
    border:           none;
    background:       transparent;
    color:            var(--gvzp-gray-500);
    cursor:           pointer;
    font-size:        0.85rem;
    font-family:      inherit;
    border-bottom:    3px solid transparent;
    transition:       all var(--gvzp-trans);
    white-space:      nowrap;
}
.gvzp-tab:hover { color: var(--gvzp-gold); }
.gvzp-tab--active {
    color:            var(--gvzp-gold);
    border-bottom-color: var(--gvzp-gold);
    font-weight:      600;
}

/* ── Panels ─────────────────────────────────────────────────────────────── */
.gvzp-panel {
    display:  none;
    padding:  2rem 2.5rem;
}
.gvzp-panel--active { display: block; }

/* ── Form elements ───────────────────────────────────────────────────────── */
.gvzp-form-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:                   1.2rem;
    margin-bottom:         1.4rem;
}
.gvzp-field { display: flex; flex-direction: column; gap: 0.4rem; }
.gvzp-label {
    font-size:   0.8rem;
    font-weight: 600;
    color:       var(--gvzp-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.gvzp-input,
.gvzp-select {
    width:         100%;
    padding:       0.65rem 0.9rem;
    border:        1.5px solid var(--gvzp-border);
    border-radius: 8px;
    background:    var(--gvzp-input-bg);
    color:         var(--gvzp-text);
    font-family:   inherit;
    font-size:     0.95rem;
    transition:    border-color var(--gvzp-trans), box-shadow var(--gvzp-trans);
    box-sizing:    border-box;
    -webkit-appearance: none;
    appearance:    none;
}
.gvzp-input:focus,
.gvzp-select:focus {
    outline:      none;
    border-color: var(--gvzp-gold);
    box-shadow:   0 0 0 3px rgba(200,160,74,0.15);
}
.gvzp-input-group {
    display:     flex;
    align-items: stretch;
    gap:         0;
}
.gvzp-currency-badge {
    padding:         0.65rem 0.8rem;
    background:      var(--gvzp-gray-200);
    border:          1.5px solid var(--gvzp-border);
    border-right:    none;
    border-radius:   8px 0 0 8px;
    font-size:       0.75rem;
    font-weight:     700;
    color:           var(--gvzp-gray-700);
    white-space:     nowrap;
    display:         flex;
    align-items:     center;
}
.gvzp-input-group .gvzp-input { border-radius: 0 8px 8px 0; }

.gvzp-radio-group {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.6rem;
}
.gvzp-radio-group label {
    display:       flex;
    align-items:   center;
    gap:           0.35rem;
    font-size:     0.87rem;
    cursor:        pointer;
    padding:       0.35rem 0.7rem;
    border:        1.5px solid var(--gvzp-border);
    border-radius: 6px;
    transition:    all var(--gvzp-trans);
}
.gvzp-radio-group label:has(input:checked) {
    border-color:  var(--gvzp-gold);
    background:    rgba(200,160,74,0.08);
    color:         var(--gvzp-gold);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.gvzp-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           0.4rem;
    padding:       0.7rem 1.6rem;
    border:        none;
    border-radius: 8px;
    font-family:   inherit;
    font-size:     0.9rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    all var(--gvzp-trans);
    letter-spacing: 0.02em;
}
.gvzp-btn--primary {
    background:    linear-gradient(135deg, var(--gvzp-gold), var(--gvzp-gold-dk));
    color:         var(--gvzp-navy);
    box-shadow:    0 2px 12px rgba(200,160,74,0.35);
}
.gvzp-btn--primary:hover {
    background:    linear-gradient(135deg, var(--gvzp-gold-lt), var(--gvzp-gold));
    transform:     translateY(-1px);
    box-shadow:    0 4px 18px rgba(200,160,74,0.45);
}
.gvzp-btn--outline {
    background:    transparent;
    border:        1.5px solid var(--gvzp-gold);
    color:         var(--gvzp-gold);
}
.gvzp-btn--outline:hover { background: rgba(200,160,74,0.1); }
.gvzp-btn--ghost {
    background:    transparent;
    color:         var(--gvzp-gray-500);
    border:        1.5px solid var(--gvzp-border);
}
.gvzp-btn--ghost:hover { color: var(--gvzp-red); border-color: var(--gvzp-red); }

/* ── Results ─────────────────────────────────────────────────────────────── */
.gvzp-result {
    margin-top:    1.5rem;
    padding:       1.5rem;
    background:    var(--gvzp-gray-100);
    border-radius: var(--gvzp-radius);
    border:        1px solid var(--gvzp-border);
    animation:     gvzpFadeIn 0.3s ease;
}
.gvzp-result--hidden { display: none !important; }

@keyframes gvzpFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gvzp-result-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap:                   1rem;
    margin-bottom:         1.2rem;
}
.gvzp-result-card {
    background:    var(--gvzp-card-bg);
    border:        1px solid var(--gvzp-border);
    border-radius: 10px;
    padding:       1rem 1.2rem;
    display:       flex;
    flex-direction: column;
    gap:           0.3rem;
}
.gvzp-result-card--accent {
    border-color:  var(--gvzp-gold);
    background:    rgba(200,160,74,0.05);
}
.gvzp-result-card--total {
    border-color:  var(--gvzp-green);
    background:    rgba(45,122,79,0.05);
}
.gvzp-result-label {
    font-size:   0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:       var(--gvzp-gray-500);
}
.gvzp-result-value {
    font-size:   1.3rem;
    font-weight: 700;
    font-family: var(--gvzp-mono);
    color:       var(--gvzp-gold);
}
.gvzp-result-card--total .gvzp-result-value { color: var(--gvzp-green); }
.gvzp-result-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }

/* ── Rate Banner ─────────────────────────────────────────────────────────── */
.gvzp-rate-banner {
    margin-top:    1rem;
    padding:       0.75rem 1rem;
    background:    linear-gradient(135deg, rgba(15,27,45,0.05) 0%, rgba(200,160,74,0.06) 100%);
    border-left:   4px solid var(--gvzp-gold);
    border-radius: 0 8px 8px 0;
    font-size:     0.85rem;
    color:         var(--gvzp-gray-700);
}

/* ── Zakat mode tabs ─────────────────────────────────────────────────────── */
.gvzp-zakat-mode-tabs {
    display:        flex;
    gap:            0.5rem;
    margin-bottom:  1.5rem;
    flex-wrap:      wrap;
}
.gvzp-ztab {
    padding:       0.55rem 1.1rem;
    border:        1.5px solid var(--gvzp-border);
    border-radius: 6px;
    background:    transparent;
    color:         var(--gvzp-gray-500);
    cursor:        pointer;
    font-family:   inherit;
    font-size:     0.82rem;
    font-weight:   600;
    transition:    all var(--gvzp-trans);
}
.gvzp-ztab:hover { border-color: var(--gvzp-gold); color: var(--gvzp-gold); }
.gvzp-ztab--active {
    background:     var(--gvzp-navy);
    color:          var(--gvzp-gold);
    border-color:   var(--gvzp-navy);
}
.gvzp-zpanel { display: none; }
.gvzp-zpanel--active { display: block; }

/* ── Asset grid ──────────────────────────────────────────────────────────── */
.gvzp-asset-grid { display: grid; gap: 0.6rem; margin-bottom: 1.2rem; }
.gvzp-asset-row {
    display:     grid;
    grid-template-columns: 1fr 180px;
    gap:         0.8rem;
    align-items: center;
    padding:     0.5rem 0.8rem;
    background:  var(--gvzp-gray-100);
    border-radius: 8px;
}
.gvzp-asset-row label { font-size: 0.85rem; }

/* ── Comparison table ────────────────────────────────────────────────────── */
.gvzp-cmp-table { margin-top: 1.5rem; overflow-x: auto; }
.gvzp-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.gvzp-table th {
    background:     var(--gvzp-navy);
    color:          var(--gvzp-gold);
    padding:        0.7rem 1rem;
    text-align:     left;
    font-size:      0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.gvzp-table td {
    padding:        0.65rem 1rem;
    border-bottom:  1px solid var(--gvzp-border);
    vertical-align: middle;
}
.gvzp-table tbody tr:hover { background: var(--gvzp-gray-100); }
.gvzp-table .gvzp-no-vat { color: var(--gvzp-gray-500); font-style: italic; font-size: 0.8rem; }
.gvzp-table .gvzp-rate-chip {
    display:       inline-block;
    padding:       0.15em 0.5em;
    border-radius: 4px;
    font-size:     0.78rem;
    font-weight:   700;
    background:    rgba(200,160,74,0.15);
    color:         var(--gvzp-gold-dk);
}
.gvzp-table .gvzp-rate-zero { background: rgba(139,133,119,0.1); color: var(--gvzp-gray-500); }

/* ── Info panel ──────────────────────────────────────────────────────────── */
.gvzp-info-panel {
    margin-top:    1.2rem;
    animation:     gvzpFadeIn 0.3s ease;
}
.gvzp-info-section {
    margin-bottom:  1.5rem;
    background:     var(--gvzp-card-bg);
    border:         1px solid var(--gvzp-border);
    border-radius:  10px;
    overflow:       hidden;
}
.gvzp-info-section-title {
    background:     var(--gvzp-gray-100);
    padding:        0.65rem 1rem;
    font-size:      0.78rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--gvzp-gray-500);
    border-bottom:  1px solid var(--gvzp-border);
}
.gvzp-info-row {
    display:       flex;
    padding:       0.55rem 1rem;
    border-bottom: 1px solid var(--gvzp-gray-100);
    gap:           1rem;
    font-size:     0.85rem;
}
.gvzp-info-row:last-child { border-bottom: none; }
.gvzp-info-key   { min-width: 180px; font-weight: 600; color: var(--gvzp-gray-700); flex-shrink: 0; }
.gvzp-info-value { color: var(--gvzp-text); }
.gvzp-info-value ul { margin: 0; padding-left: 1.2em; }
.gvzp-info-value li { margin-bottom: 0.15em; }
.gvzp-badge-implemented   { color: var(--gvzp-green); font-weight: 700; }
.gvzp-badge-not-impl      { color: var(--gvzp-red);   font-weight: 700; }

/* ── Note box ────────────────────────────────────────────────────────────── */
.gvzp-note {
    padding:       0.8rem 1rem;
    background:    rgba(200,160,74,0.07);
    border-left:   4px solid var(--gvzp-gold);
    border-radius: 0 8px 8px 0;
    font-size:     0.83rem;
    color:         var(--gvzp-gray-700);
    margin-bottom: 1.2rem;
    line-height:   1.55;
}

/* ── Loader ──────────────────────────────────────────────────────────────── */
.gvzp-loader {
    position:    absolute;
    inset:       0;
    background:  rgba(15,27,45,0.55);
    display:     flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:         0.8rem;
    color:       var(--gvzp-gold);
    font-size:   0.9rem;
    z-index:     100;
    border-radius: var(--gvzp-radius);
    backdrop-filter: blur(3px);
}
.gvzp-loader--hidden { display: none !important; }
.gvzp-spinner {
    width:         36px;
    height:        36px;
    border:        3px solid rgba(200,160,74,0.3);
    border-top-color: var(--gvzp-gold);
    border-radius: 50%;
    animation:     gvzpSpin 0.7s linear infinite;
}
@keyframes gvzpSpin { to { transform: rotate(360deg); } }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.gvzp-footer {
    padding:        0.8rem 2.5rem;
    background:     var(--gvzp-gray-100);
    border-top:     1px solid var(--gvzp-border);
    display:        flex;
    justify-content: space-between;
    align-items:    center;
    font-size:      0.73rem;
    color:          var(--gvzp-gray-500);
    flex-wrap:      wrap;
    gap:            0.4rem;
}
.gvzp-footer-rates { font-style: italic; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .gvzp-header  { padding: 1.4rem 1.2rem; }
    .gvzp-panel   { padding: 1.2rem; }
    .gvzp-footer  { padding: 0.6rem 1.2rem; flex-direction: column; text-align: center; }
    .gvzp-title   { font-size: 1.2rem; }
    .gvzp-asset-row { grid-template-columns: 1fr; }
    .gvzp-result-grid { grid-template-columns: 1fr 1fr; }
    .gvzp-info-key { min-width: 120px; }
}