/* ==========================================
   ProCargo Tariffs Widget Styles
   v2.9.5 - Pixel-perfect Next.js match, font fix for '/' glyph
   ========================================== */

.procargo-tariffs-page {
    min-height: 100vh;
    background: #fafdff;
    padding-top: 96px; /* pt-24 = 96px */
}

.procargo-tariffs-container {
    max-width: 1152px; /* max-w-6xl */
    margin: 0 auto;
    padding: 48px 24px; /* py-12 px-6 */
}

/* ========== HEADER ========== */
/* Next.js: text-center mb-12 relative */
.tariffs-header {
    text-align: center;
    margin-bottom: 48px; /* mb-12 */
    position: relative;
}

/* Blur circle: w-32 h-32 bg-primary/10 rounded-full blur-3xl */
.tariffs-header::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 128px; /* w-32 */
    height: 128px; /* h-32 */
    background: rgba(14, 99, 174, 0.1); /* bg-primary/10 */
    border-radius: 50%;
    filter: blur(64px); /* blur-3xl */
    z-index: -1;
}

/* Title: text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-dark my-8 uppercase */
.tariffs-title {
    font-size: 24px;
    font-weight: 700;
    color: #141414;
    margin: 32px 0; /* my-8 */
    text-transform: uppercase;
    line-height: 1.2;
    font-family: 'Montserrat', sans-serif;
}
@media (min-width: 640px) { .tariffs-title { font-size: 30px; } }
@media (min-width: 768px) { .tariffs-title { font-size: 36px; } }
@media (min-width: 1024px) { .tariffs-title { font-size: 48px; } }

/* Subtitle: text-xl text-gray-600 font-mont-extralight */
.tariffs-subtitle {
    font-size: 20px;
    color: #4b5563; /* text-gray-600 */
    margin: 0;
    font-family: 'Mont ExtraLight DEMO', 'Montserrat', sans-serif;
    font-weight: 200;
    line-height: 1.5;
}

/* ========== QUICK CALCULATOR ========== */
/* Next.js: bg-white-blue border-gray-100 dark:bg-gray-700 rounded-xl shadow-lg border border-primary/10 p-8 mb-12 */
.tariffs-calculator {
    background: #E3F4FF; /* bg-white-blue */
    border-radius: 12px; /* rounded-xl */
    padding: 32px; /* p-8 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-lg */
    border: 1px solid rgba(14, 99, 174, 0.1); /* border-primary/10 */
    margin-bottom: 48px; /* mb-12 */
    transition: all 0.3s ease;
    overflow: hidden;
}

.tariffs-calculator:hover {
    border-color: rgba(14, 99, 174, 0.2); /* hover:border-primary/20 */
}

/* Calculator header: flex items-center gap-4 mb-6 */
.calculator-header {
    display: flex;
    align-items: center;
    gap: 16px; /* gap-4 */
    margin-bottom: 24px; /* mb-6 */
}

/* Icon wrapper: p-3 bg-primary/5 rounded-lg */
.calculator-icon-wrap {
    padding: 12px; /* p-3 */
    background: rgba(14, 99, 174, 0.05); /* bg-primary/5 */
    border-radius: 8px; /* rounded-lg */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.calculator-icon-wrap svg {
    width: 24px; /* w-6 */
    height: 24px; /* h-6 */
    color: #0E63AE; /* text-primary */
    stroke: #0E63AE;
}

/* Calculator title: text-2xl font-womby text-dark */
.calculator-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: #141414;
    margin: 0;
    font-family: 'Womby', sans-serif;
}

/* Calculator fields: grid md:grid-cols-3 gap-6 */
.calculator-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px; /* gap-6 */
}
@media (min-width: 768px) {
    .calculator-fields {
        grid-template-columns: repeat(3, 1fr); /* md:grid-cols-3 */
    }
}

/* Input: px-4 py-3 rounded-lg border border-gray-300 font-mont-extralight outline-0 bg-white text-dark */
.calculator-input,
.calculator-select {
    width: 100%;
    padding: 12px 16px; /* py-3 px-4 */
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 8px; /* rounded-lg */
    font-size: 16px;
    font-family: 'Mont ExtraLight DEMO', 'Montserrat', sans-serif;
    font-weight: 200;
    color: #141414;
    background: #ffffff;
    transition: all 0.3s ease;
    outline: none;
    box-sizing: border-box;
}

.calculator-input:focus,
.calculator-select:focus {
    border-color: #5EC7F2; /* focus:border-primary-blue */
    box-shadow: 0 0 0 2px rgba(14, 99, 174, 0.1); /* focus:ring-2 focus:ring-primary/20 */
}

.calculator-input::placeholder {
    color: #9ca3af;
}

/* Button: text-center px-6 py-3 text-white rounded-lg gradient border-white/40 border-2 */
.calculator-button {
    padding: 12px 24px; /* py-3 px-6 */
    border: 2px solid rgba(255, 255, 255, 0.4); /* border-white/40 border-2 */
    border-radius: 8px; /* rounded-lg */
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    text-align: center;
}

.calculator-button:hover {
    transform: scale(1.02); /* hover:scale-[1.02] */
}

/* ========== REGIONS & TABLES ========== */
/* Region: mb-12 */
.tariffs-region {
    margin-bottom: 48px; /* mb-12 */
    opacity: 0;
    animation: tariffsFadeIn 0.5s ease-out forwards;
}

@keyframes tariffsFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Region header: flex items-center gap-4 mb-6 */
.region-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

/* Region icon: p-3 bg-primary/5 rounded-lg */
.region-icon-wrap {
    padding: 12px;
    background: rgba(14, 99, 174, 0.05);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.region-icon-wrap svg {
    width: 24px;
    height: 24px;
}

/* Region title: text-2xl font-womby text-dark */
.region-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: #141414;
    margin: 0;
    font-family: 'Womby', sans-serif;
}

/* Table wrapper: bg-white-blue border-gray-100 rounded-xl shadow-lg border border-primary/10 p-8 */
.region-table-wrap {
    background: #E3F4FF; /* bg-white-blue */
    border-radius: 12px; /* rounded-xl */
    padding: 32px; /* p-8 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(14, 99, 174, 0.1);
    overflow-x: auto;
    transition: all 0.3s ease;
}

.region-table-wrap:hover {
    border-color: rgba(14, 99, 174, 0.2);
}

.tariffs-table {
    width: 100%;
    border-collapse: collapse;
}

/* Table header: border-b border-primary/10, text-sm font-mont-extralight text-gray-900 */
.tariffs-table thead tr {
    border-bottom: 1px solid rgba(14, 99, 174, 0.1); /* border-primary/10 */
}

.tariffs-table th {
    padding: 16px 24px; /* px-6 py-4 */
    text-align: left;
    font-size: 14px; /* text-sm */
    font-family: 'Mont ExtraLight DEMO', 'Montserrat', sans-serif;
    font-weight: 200;
    color: #111827; /* text-gray-900 */
    text-transform: none; /* NOT uppercase in Next.js */
    letter-spacing: normal;
}

/* Table cells */
.tariffs-table td {
    padding: 16px 24px; /* px-6 py-4 */
    font-family: 'Mont ExtraLight DEMO', 'Montserrat', sans-serif;
    font-weight: 200;
}

.tariffs-table tbody tr {
    border-bottom: 1px solid rgba(14, 99, 174, 0.1); /* border-primary/10 */
    transition: background-color 0.15s ease;
}

.tariffs-table tbody tr:last-child {
    border-bottom: none;
}

.tariffs-table tbody tr:hover {
    background: rgba(14, 99, 174, 0.05); /* hover:bg-primary/5 */
}

/* country-name: text-dark font-mont-extralight */
.country-name {
    color: #141414;
    font-family: 'Mont ExtraLight DEMO', 'Montserrat', sans-serif;
    font-weight: 200;
}

/* cargo-type: text-dark */
.cargo-type {
    color: #141414;
}

/* tariff-price: text-primary font-medium — Montserrat only (Mont ExtraLight DEMO lacks '/' glyph) */
.tariffs-table td.tariff-price {
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
}

/* ========== ADDITIONAL INFO ========== */
/* bg-white-blue border-gray-100 rounded-xl shadow-lg border border-primary/10 p-8 */
.tariffs-additional-info {
    background: #E3F4FF;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(14, 99, 174, 0.1);
    transition: all 0.3s ease;
}

.tariffs-additional-info:hover {
    border-color: rgba(14, 99, 174, 0.2);
}

/* Info header: flex items-center justify-between mb-6 */
.info-header {
    display: flex;
    align-items: center;
    gap: 8px; /* mr-2 on icon */
    margin-bottom: 24px;
}

.info-header .info-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* Info title: text-xl font-womby text-dark */
.info-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: #141414;
    margin: 0;
    font-family: 'Womby', sans-serif;
}

/* Info content: p-4 bg-blue-50 rounded-lg border border-blue-200 */
.info-content {
    padding: 16px; /* p-4 */
    background: #eff6ff; /* bg-blue-50 */
    border-radius: 8px; /* rounded-lg */
    border: 1px solid #bfdbfe; /* border-blue-200 */
}

/* Info text: text-sm text-blue-800 font-mont-extralight */
.info-subtitle {
    font-size: 14px;
    color: #1e40af; /* text-blue-800 */
    margin: 0 0 8px 0; /* mb-2 */
    font-family: 'Mont ExtraLight DEMO', 'Montserrat', sans-serif;
    font-weight: 200;
}

.info-subtitle strong {
    font-weight: 700;
    color: #1e40af;
}

.conditions-list {
    margin: 0;
    padding-left: 24px;
    list-style: disc;
}

.conditions-list li {
    font-size: 14px;
    color: #1e40af; /* text-blue-800 */
    margin-bottom: 4px; /* space-y-1 */
    font-family: 'Mont ExtraLight DEMO', 'Montserrat', sans-serif;
    font-weight: 200;
    margin-left: 8px; /* ml-2 */
}

.conditions-list li:last-child {
    margin-bottom: 0;
}

/* ========== DARK THEME ========== */
.dark-theme .procargo-tariffs-page { background: #1e1e1e; }

.dark-theme .tariffs-title { color: #ffffff; }
.dark-theme .tariffs-subtitle { color: #9ca3af; }

.dark-theme .tariffs-calculator {
    background: #374151; border-color: #4b5563;
}
.dark-theme .calculator-icon-wrap { background: rgba(94, 199, 242, 0.15); }
.dark-theme .calculator-icon-wrap svg { color: #5EC7F2; stroke: #5EC7F2; }
.dark-theme .calculator-header h2 { color: #ffffff; }
.dark-theme .calculator-input,
.dark-theme .calculator-select {
    background: #4b5563; border-color: #6b7280; color: #ffffff;
}
.dark-theme .calculator-button {
    background: #1f2937 !important;
}
.dark-theme .calculator-button:hover {
    background: #111827 !important;
}

.dark-theme .region-icon-wrap { background: rgba(94, 199, 242, 0.15); }
.dark-theme .region-icon-wrap svg { color: #5EC7F2; stroke: #5EC7F2; }
.dark-theme .region-header h2 { color: #ffffff; }
.dark-theme .region-table-wrap {
    background: #374151; border-color: #4b5563;
}
.dark-theme .tariffs-table th { color: #ffffff; }
.dark-theme .tariffs-table td { border-color: rgba(14, 99, 174, 0.1); }
.dark-theme .country-name { color: #ffffff; }
.dark-theme .cargo-type { color: #d1d5db; }

.dark-theme .tariffs-additional-info {
    background: #374151; border-color: #4b5563;
}
.dark-theme .info-header h3 { color: #ffffff; }
.dark-theme .info-content {
    background: rgba(30, 58, 138, 0.2); border-color: rgba(30, 64, 175, 0.3);
}
.dark-theme .info-subtitle,
.dark-theme .info-subtitle strong { color: #93c5fd; }
.dark-theme .conditions-list li { color: #93c5fd; }

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .procargo-tariffs-container {
        padding: 32px 16px;
    }
    
    .tariffs-calculator,
    .region-table-wrap,
    .tariffs-additional-info {
        padding: 20px;
    }
    
    .calculator-fields {
        grid-template-columns: 1fr;
    }
    
    .tariffs-table th,
    .tariffs-table td {
        padding: 12px;
        font-size: 13px;
    }
}