/* ===== VAT CALCULATOR - TEAL & NAVY ===== */
:root {
    --vat-teal: #0D9488;
    --vat-teal-light: #14B8A6;
    --vat-teal-dark: #0F766E;
    --vat-navy: #0F172A;
    --vat-navy-mid: #1E293B;
    --vat-navy-light: #334155;
    --vat-white: #FFFFFF;
    --vat-gray: #F1F5F9;
    --vat-border: #E2E8F0;
    --vat-text: #1E293B;
    --vat-muted: #64748B;
    --vat-radius: 16px;
    --vat-shadow: 0 4px 24px rgba(15,23,42,0.10);
}

.vat-wrap * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', 'Segoe UI', sans-serif; }

.vat-wrap {
    max-width: 860px;
    margin: 0 auto;
    background: var(--vat-gray);
    border-radius: var(--vat-radius);
    overflow: hidden;
    box-shadow: var(--vat-shadow);
}

/* Header */
.vat-header {
    background: linear-gradient(135deg, var(--vat-navy) 0%, var(--vat-navy-mid) 50%, var(--vat-teal-dark) 100%);
    padding: 40px 32px;
    text-align: center;
    color: var(--vat-white);
}
.vat-header-icon {
    width: 64px; height: 64px;
    background: var(--vat-teal);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 900;
    margin: 0 auto 16px;
    box-shadow: 0 4px 16px rgba(13,148,136,0.4);
}
.vat-header h2 { font-size: 2rem; font-weight: 800; margin-bottom: 8px; }
.vat-header p { font-size: 1rem; opacity: 0.8; }

/* Currency Bar */
.vat-currency-bar {
    background: var(--vat-navy-mid);
    padding: 16px 32px;
    display: flex; align-items: center; gap: 16px;
    flex-wrap: wrap;
}
.vat-currency-bar label { color: var(--vat-white); font-size: 0.875rem; opacity: 0.8; white-space: nowrap; }
.vat-currency-bar select {
    flex: 1; min-width: 200px;
    background: var(--vat-navy-light);
    color: var(--vat-white);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.95rem;
    cursor: pointer;
    outline: none;
}

/* Tabs */
.vat-tabs {
    display: flex;
    background: var(--vat-white);
    border-bottom: 2px solid var(--vat-border);
    padding: 0 32px;
    gap: 0;
}
.vat-tab {
    padding: 16px 24px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--vat-muted);
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -2px;
}
.vat-tab:hover { color: var(--vat-teal); }
.vat-tab.active {
    color: var(--vat-teal);
    border-bottom-color: var(--vat-teal);
}

/* Panel */
.vat-panel { padding: 32px; background: var(--vat-white); }
.vat-panel.hidden { display: none; }

/* Form Grid */
.vat-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 28px;
}
@media(max-width:600px){ .vat-form-grid { grid-template-columns: 1fr; } }

.vat-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--vat-navy);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Input */
.vat-input-wrap {
    display: flex;
    align-items: center;
    border: 2px solid var(--vat-border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.vat-input-wrap:focus-within { border-color: var(--vat-teal); }
.vat-symbol {
    padding: 12px 14px;
    background: var(--vat-teal);
    color: var(--vat-white);
    font-weight: 700;
    font-size: 1rem;
    min-width: 48px;
    text-align: center;
}
.vat-input-wrap input {
    flex: 1; padding: 12px 16px;
    border: none; outline: none;
    font-size: 1.1rem; font-weight: 600;
    color: var(--vat-navy);
    background: var(--vat-white);
}

/* Rate Wrap */
.vat-rate-wrap {
    display: flex;
    align-items: center;
    border: 2px solid var(--vat-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
    transition: border-color 0.2s;
}
.vat-rate-wrap:focus-within { border-color: var(--vat-teal); }
.vat-rate-wrap input {
    flex: 1; padding: 12px 16px;
    border: none; outline: none;
    font-size: 1.1rem; font-weight: 600;
    color: var(--vat-navy);
}
.vat-pct {
    padding: 12px 16px;
    background: var(--vat-navy);
    color: var(--vat-white);
    font-weight: 700;
}

/* Quick Rates */
.vat-quick-rates { display: flex; gap: 8px; flex-wrap: wrap; }
.vat-quick-rates button {
    padding: 6px 14px;
    border: 2px solid var(--vat-border);
    background: var(--vat-white);
    color: var(--vat-muted);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.vat-quick-rates button:hover,
.vat-quick-rates button.active {
    background: var(--vat-teal);
    color: var(--vat-white);
    border-color: var(--vat-teal);
}

/* Results */
.vat-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    animation: vatFadeIn 0.4s ease;
}
@media(max-width:600px){ .vat-results { grid-template-columns: 1fr; } }

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

.vat-result-card {
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    display: flex; flex-direction: column; gap: 8px;
}
.vat-result-card.teal { background: var(--vat-teal); color: white; }
.vat-result-card.navy { background: var(--vat-navy); color: white; }
.vat-result-card.light { background: var(--vat-gray); color: var(--vat-navy); border: 2px solid var(--vat-border); }

.vat-result-label { font-size: 0.8rem; font-weight: 600; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.5px; }
.vat-result-value { font-size: 1.5rem; font-weight: 800; }

/* Breakdown Bar */
.vat-breakdown { margin-top: 8px; }
.vat-bar-wrap {
    display: flex;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}
.vat-bar-net {
    background: var(--vat-navy);
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 0.8rem; font-weight: 700;
    transition: width 0.5s ease;
}
.vat-bar-vat {
    background: var(--vat-teal);
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 0.8rem; font-weight: 700;
    transition: width 0.5s ease;
}
.vat-bar-legend { display: flex; gap: 24px; font-size: 0.82rem; color: var(--vat-muted); }
.leg-net { color: var(--vat-navy); font-weight: 600; }
.leg-vat { color: var(--vat-teal); font-weight: 600; }

/* VAT Checker */
.vat-checker-intro { margin-bottom: 20px; color: var(--vat-muted); font-size: 0.95rem; }
.vat-checker-input { margin-bottom: 24px; max-width: 300px; }

/* Table */
.vat-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--vat-border); }
.vat-table { width: 100%; border-collapse: collapse; }
.vat-table thead tr { background: var(--vat-navy); }
.vat-table thead th { padding: 14px 16px; color: white; font-size: 0.85rem; text-align: left; }
.vat-table tbody tr:nth-child(even) { background: var(--vat-gray); }
.vat-table tbody tr:hover { background: rgba(13,148,136,0.08); }
.vat-table tbody td { padding: 12px 16px; font-size: 0.9rem; color: var(--vat-text); border-top: 1px solid var(--vat-border); }
.vat-table .rate-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8rem; font-weight: 700;
    background: var(--vat-teal);
    color: white;
}

/* Export Bar */
.vat-export-bar {
    display: flex; gap: 12px; flex-wrap: wrap;
    padding: 20px 32px;
    background: var(--vat-gray);
    border-top: 1px solid var(--vat-border);
}
.vat-export-btn {
    padding: 10px 20px;
    border: none; border-radius: 8px;
    font-size: 0.9rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
}
.vat-export-btn.pdf { background: var(--vat-navy); color: white; }
.vat-export-btn.excel { background: var(--vat-teal); color: white; }
.vat-export-btn.whatsapp { background: #25D366; color: white; }
.vat-export-btn.copy { background: white; color: var(--vat-navy); border: 2px solid var(--vat-border); }
.vat-export-btn:hover { opacity: 0.85; transform: translateY(-1px); }

/* Reference Section */
.vat-ref-section { padding: 32px; background: var(--vat-white); border-top: 1px solid var(--vat-border); }
.vat-ref-section h3 { font-size: 1.1rem; font-weight: 700; color: var(--vat-navy); margin-bottom: 20px; }
.vat-ref-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media(max-width:700px){ .vat-ref-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:480px){ .vat-ref-grid { grid-template-columns: 1fr; } }

.vat-ref-card {
    background: var(--vat-gray);
    border: 1px solid var(--vat-border);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}
.vat-ref-flag { font-size: 2rem; margin-bottom: 6px; }
.vat-ref-country { font-weight: 700; font-size: 0.9rem; color: var(--vat-navy); margin-bottom: 10px; }
.vat-ref-rates { display: flex; flex-direction: column; gap: 4px; }
.rate-std { background: var(--vat-navy); color: white; padding: 3px 10px; border-radius: 10px; font-size: 0.78rem; font-weight: 600; }
.rate-red { background: var(--vat-teal); color: white; padding: 3px 10px; border-radius: 10px; font-size: 0.78rem; font-weight: 600; }
.rate-zero { background: #94A3B8; color: white; padding: 3px 10px; border-radius: 10px; font-size: 0.78rem; font-weight: 600; }