/* =========================================================
   Modern skin — keeps w3.css structure + orange theme intact.
   Only visual polish (typography, spacing, shadows, radius,
   transitions, focus rings). No layout/structure changes.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Kanit:wght@300;400;500;600&display=swap');

:root {
    --brand:        #ff8c1a;
    --brand-600:    #f57c00;
    --brand-700:    #ef6c00;
    --brand-50:     #fff4e6;
    --brand-100:    #ffe3c2;

    --ink:          #1f2937;
    --ink-soft:     #374151;
    --muted:        #6b7280;
    --muted-2:      #9ca3af;

    --bg:           #f6f7fb;
    --surface:      #ffffff;
    --line:         #e5e7eb;
    --line-soft:    #eef0f4;

    --ok:           #16a34a;
    --ok-soft:      #dcfce7;

    --radius-sm:    8px;
    --radius:       12px;
    --radius-lg:    16px;

    --shadow-xs:    0 1px 2px rgba(17, 24, 39, .04);
    --shadow-sm:    0 2px 6px rgba(17, 24, 39, .06);
    --shadow:       0 8px 24px rgba(17, 24, 39, .07);
    --shadow-lg:    0 14px 40px rgba(17, 24, 39, .10);

    --ease:         cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
html, body {
    line-height: 1.6;
    background: var(--bg);
    color: var(--ink);
}

body,
.w3-main,
h1, h2, h3, h4, h5, h6,
button, input, select, textarea {
    font-family: 'Inter', 'Kanit', 'Segoe UI', Tahoma, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { color: var(--ink); letter-spacing: -.01em; }
h3 { font-weight: 600; }

/* Soft page backdrop with brand-tinted wash */
body::before {
    content: "";
    position: fixed; inset: 0;
    background:
        radial-gradient(1100px 500px at 100% -10%, rgba(255, 140, 26, .10), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(255, 140, 26, .06), transparent 60%),
        var(--bg);
    z-index: -1;
}

/* ---------- Language toggle ---------- */
.lang-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .04em;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    padding: 6px 14px !important;
    margin: auto 6px;
    color: var(--ink-soft) !important;
    background: transparent !important;
    transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.lang-toggle:hover {
    background: var(--brand-50) !important;
    border-color: var(--brand-100) !important;
    color: var(--brand-700) !important;
}
.lang-toggle .fi { font-size: 14px; border-radius: 3px; }

/* ---------- Navbar (glassy sticky) ---------- */
.w3-top .w3-bar.w3-white {
    background: rgba(255, 255, 255, .78) !important;
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter:         saturate(140%) blur(12px);
    box-shadow: var(--shadow-sm) !important;
    border-bottom: 1px solid var(--line-soft);
}

.w3-bar .w3-button,
.w3-bar-item.w3-button {
    padding: 14px 16px;
    border-radius: 10px;
    transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
    color: var(--ink-soft);
}
.w3-bar .w3-button:hover,
.w3-bar-item.w3-button:hover {
    background: var(--brand-50) !important;
    color: var(--brand-700) !important;
}
.w3-bar .w3-button .fa { color: var(--brand-600); margin-right: 6px; }

#myNavbar img { max-height: 42px; display: block; }

/* Sidebar (mobile) */
nav#mySidebar.w3-sidebar {
    background: #111827 !important;
    border-right: 1px solid rgba(255, 255, 255, .06);
}
nav#mySidebar .w3-button:hover {
    background: rgba(255, 140, 26, .18) !important;
    color: #fff !important;
}

/* ---------- Headings in views ---------- */
h3.w3-center[style*="color: orange"],
h3.w3-center {
    color: var(--ink) !important;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.02em;
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 18px;
}
h3.w3-center::after {
    content: "";
    display: block;
    width: 56px; height: 3px;
    margin: 10px auto 0;
    background: linear-gradient(90deg, var(--brand), var(--brand-700));
    border-radius: 3px;
}

/* ---------- Inputs ---------- */
.w3-input.w3-border,
input.w3-input,
textarea.w3-input,
select.w3-input {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm) !important;
    background: #fff !important;
    padding: 10px 12px !important;
    font-size: 14px;
    color: var(--ink);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.w3-input.w3-border:hover,
input.w3-input:hover,
textarea.w3-input:hover { border-color: var(--brand-100) !important; }

.w3-input.w3-border:focus,
input.w3-input:focus,
textarea.w3-input:focus,
select.w3-input:focus {
    outline: none !important;
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(255, 140, 26, .18) !important;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* Field labels */
.w3-row > .w3-col > span { color: var(--muted); font-size: 13px; font-weight: 500; }

/* ---------- Dropdown (country picker) ----------
   FIX: w3-dropdown-hover uses CSS :hover to show content, but Vue's
   v-show=true only *removes* the inline display:none — it doesn't add
   display:block. So when mouse leaves the hover target, CSS re-hides it.
   Solution: make display:block the CSS default inside #app so that
   v-show:false (inline display:none) hides and v-show:true shows correctly,
   independent of mouse hover state.                                        */
#app .w3-dropdown-content { display: block; }

/* ---------- Dropdown (country picker) ---------- */
.w3-dropdown-hover > .w3-button.w3-white.w3-border {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 14px !important;
    height: 44px;
    display: inline-flex !important;
    align-items: center;
    font-size: 14px;
    color: var(--ink);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.w3-dropdown-hover > .w3-button.w3-white.w3-border:hover {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(255, 140, 26, .14);
}

.w3-dropdown-content.w3-bar-block.w3-border {
    margin-top: 6px;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    overflow: hidden;
    padding: 6px;
    background: #fff;
}
.w3-dropdown-content .w3-bar-item.w3-button {
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
}
.w3-dropdown-content .w3-bar-item.w3-button:hover {
    background: var(--brand-50) !important;
    color: var(--brand-700) !important;
}

/* ---------- Buttons ---------- */
.w3-btn.w3-orange,
.w3-button.w3-orange,
.w3-orange:not(.w3-bar):not(.w3-container) {
    background: linear-gradient(180deg, #ffa64d 0%, var(--brand) 55%, var(--brand-600) 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(0, 0, 0, .02) !important;
    border-radius: 10px !important;
    padding: 11px 18px !important;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: 0 6px 14px rgba(245, 124, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease);
}
.w3-btn.w3-orange:hover,
.w3-button.w3-orange:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(245, 124, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .25);
    filter: brightness(1.02);
}
.w3-btn.w3-orange:active,
.w3-button.w3-orange:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(245, 124, 0, .26);
}
.w3-btn.w3-orange .fa { margin-right: 6px; }

/* Inline icon buttons (e.g. trash) */
.fa.fa-trash {
    color: var(--muted-2);
    cursor: pointer;
    transition: color .15s var(--ease), transform .15s var(--ease);
}
.fa.fa-trash:hover { color: #dc2626; transform: scale(1.08); }

/* ---------- Cards ---------- */
.w3-card,
.w3-card-4,
.w3-card.w3-round,
.w3-card.w3-white {
    background: var(--surface) !important;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.w3-card:hover {
    box-shadow: var(--shadow) !important;
    transform: translateY(-1px);
    border-color: var(--line);
}

/* Price-result card: keep green accent but modernize */
.w3-card.w3-round.w3-white[style*="border-left"] {
    border-left: 0 !important;
    position: relative !important;
    padding: 18px 18px 18px 22px !important;
}
.w3-card.w3-round.w3-white[style*="border-left"]::before {
    content: "";
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, #22c55e, #16a34a);
}

/* Vendor logo — graceful fallback when image is missing */
.vendor-logo-wrap {
    width: 80px; height: 80px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-soft);
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.vendor-logo-wrap .vendor-logo {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.vendor-logo-wrap .vendor-logo-fallback {
    display: none;
    color: var(--muted-2);
    font-size: 26px;
}
.vendor-logo-wrap.no-logo .vendor-logo   { display: none; }
.vendor-logo-wrap.no-logo .vendor-logo-fallback { display: flex; }
.w3-card .w3-large { color: var(--ink); }
.w3-card .w3-small.w3-text-grey { color: var(--muted) !important; font-size: 12.5px; }
.w3-card .w3-xlarge.w3-text-green {
    color: var(--ok) !important;
    font-weight: 700;
    letter-spacing: -.01em;
}
.w3-card img.w3-image.w3-round {
    border-radius: var(--radius-sm) !important;
    object-fit: cover;
    border: 1px solid var(--line-soft);
    background: #fff;
}

/* Tracking-result card */
.w3-card.w3-white.w3-padding {
    padding: 18px 20px !important;
}
.w3-card.w3-white.w3-padding b { color: var(--ink); }
.w3-card.w3-white.w3-padding a { color: #1e88e5; }
.w3-card.w3-white.w3-padding a:hover { color: #1565c0; }

/* ---------- Footer (keep orange, but refined) ---------- */
.w3-container.w3-orange[style*="bottom: 0"] {
    background: linear-gradient(90deg, var(--brand-700), var(--brand)) !important;
    color: #fff !important;
    box-shadow: 0 -6px 20px rgba(245, 124, 0, .18);
    padding: 10px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .15);
    z-index: 900;
}
.w3-container.w3-orange[style*="bottom: 0"] p {
    margin: 0;
    font-size: 12.5px;
    letter-spacing: .02em;
    opacity: .95;
}

/* ---------- "Before calc" illustration ---------- */
#divBeforeCal img {
    max-width: 85%;
    border-radius: var(--radius-lg);
    filter: drop-shadow(0 20px 30px rgba(245, 124, 0, .10));
}

/* ---------- Utility tweaks ---------- */
.w3-margin-bottom { margin-bottom: 14px !important; }
.w3-round, .w3-round-large { border-radius: var(--radius) !important; }

/* Smooth view switch */
#divCheck, #divTrack { animation: fadeUp .28s var(--ease) both; }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Error text */
[v-if] + .w3-col,
.w3-col > *:empty { }

/* Scrollbar polish (webkit) */
.w3-dropdown-content::-webkit-scrollbar { width: 10px; }
.w3-dropdown-content::-webkit-scrollbar-thumb {
    background: #e5e7eb; border-radius: 10px; border: 2px solid #fff;
}
.w3-dropdown-content::-webkit-scrollbar-thumb:hover { background: var(--brand-100); }

/* Selection */
::selection { background: var(--brand-100); color: var(--brand-700); }

/* Font-awesome crispness */
.fa { -webkit-font-smoothing: antialiased; }

/* Small screens */
@media (max-width: 600px) {
    h3.w3-center { font-size: 1.35rem; }
    .w3-btn.w3-orange, .w3-button.w3-orange { width: 100% !important; }
}