/* Base styles */
:root {
    --primary: #0056b3;
    --secondary: #00a2ff;
    --accent: #ff7b00;
    --light: #f8f9fa;
    --dark: #212529;
    --gray: #6c757d;

    /* Theme tokens -- everything above stays constant across themes (brand
       colors); everything below is what actually flips in dark mode. Every
       stylesheet in this project loads style.css, so these are available
       everywhere without needing to be redeclared per-file. */
    --bg: #f5f7fa;
    --surface: #ffffff;
    --surface-alt: #f8f9fa;
    --text: #212529;
    --text-muted: #6c757d;
    --text-faint: #999999;
    --border: #e5e7eb;
    --border-strong: #222222;
    --header-bg: rgba(255, 255, 255, 0.95);
    --nav-hover-bg: rgba(0, 86, 179, 0.06);
    --overlay: rgba(0, 0, 0, 0.5);
    --section-overlay: rgba(248, 249, 250, 0.9);
}

:root[data-theme="dark"] {
    --primary: #4d8fdb;
    --secondary: #38bdf8;
    --accent: #ff9636;
    --light: #1c2436;
    --dark: #e7e9ee;
    --gray: #9aa4b5;

    --bg: #0e1420;
    --surface: #161d2b;
    --surface-alt: #1c2436;
    --text: #e7e9ee;
    --text-muted: #9aa4b5;
    --text-faint: #7a8496;
    --border: #2a3244;
    --border-strong: #e7e9ee;
    --header-bg: rgba(22, 29, 43, 0.95);
    --nav-hover-bg: rgba(56, 189, 248, 0.14);
    --overlay: rgba(0, 0, 0, 0.7);
    --section-overlay: rgba(14, 20, 32, 0.88);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    line-height: 1.6;
    color: var(--text);
    background-color: var(--bg);
    overflow-x: hidden;
    transition: background-color 0.2s ease, color 0.2s ease;
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.btn {
    display: inline-block;
    background-color: var(--primary);
    color: white;
    padding: 12px 28px;
    border-radius: 4px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    /* .quote-btn-primary is an <a>, .quote-btn-secondary is a <button>.
       Anchors inherit body's line-height (1.6); <button> gets the
       browser's own UA line-height instead, which inheritance doesn't
       override. Same padding, same font-size, but two different line
       boxes -- that's what was actually making one button shorter than
       the other, not the border. Pin both explicitly so every .btn
       (anchor or button) computes the same height. */
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

.btn:hover:not(:disabled) {
    filter: brightness(0.88);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 86, 179, 0.2);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-accent {
    background-color: var(--accent);
}

.btn-accent:hover {
    filter: brightness(0.88);
}

/* Header & Navigation */
header {
    background-color: var(--header-bg);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.3s ease;
}

header.scrolled {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

.logo i {
    color: var(--accent);
}

.nav-links {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.nav-links li {
    display: flex;
    align-items: center;
}

.nav-links a {
    display: inline-block;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--dark);
    padding: 8px 10px;
    border-radius: 4px;
    position: relative;
    white-space: nowrap;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-links a:hover {
    color: var(--primary);
    background-color: var(--nav-hover-bg);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 10px;
    right: 10px;
    width: auto;
    height: 2px;
    background-color: var(--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.nav-links a:hover::after {
    transform: scaleX(1);
}

/* Visually separate account actions (Sign In / Dashboard / Logout) from the
   primary nav links, and keep the CTA button clear of the pack */
.nav-links li#signInItem,
.nav-links li:has(#logoutBtn),
.nav-links li:has(a[href="dashboard.html"]) {
    margin-left: 6px;
    padding-left: 10px;
    border-left: 1px solid var(--border);
}

.nav-links a i {
    margin-right: 6px;
}

.nav-links li:last-child {
    margin-left: 10px;
}

.nav-links li:last-child a.btn {
    padding: 10px 22px;
    border-radius: 6px;
    font-size: 0.95rem;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--primary);
    cursor: pointer;
}

.theme-toggle-btn {
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--text);
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.theme-toggle-btn:hover {
    background: var(--nav-hover-bg);
    color: var(--primary);
}

/* Hero Section */
.hero {
    background: linear-gradient(rgba(0, 86, 179, 0.85), rgba(0, 162, 255, 0.85)), 
                url('../img/shipbg2.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 150px 0 100px;
    text-align: center;
    position: relative;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero p {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto 30px;
    opacity: 0.95;
}

.hero-btns {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Services Section */
.section {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
}

.section-title h2 {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 15px;
}

.section-title p {
    color: var(--gray);
    max-width: 700px;
    margin: 0 auto;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.service-card {
    background-color: var(--surface);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.service-img {
    height: 200px;
    width: 100%;
    overflow: hidden;
}

.service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.service-card:hover .service-img img {
    transform: scale(1.05);
}

.service-content {
    padding: 25px 20px;
}

.service-icon {
    background-color: rgba(0, 86, 179, 0.1);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    color: var(--primary);
    font-size: 1.5rem;
}

.service-card h3 {
    margin-bottom: 15px;
    color: var(--dark);
}

/* Tracking Section */
.tracking-section {
    background: linear-gradient(var(--section-overlay), var(--section-overlay)),
                url('../img/bg2.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.tracking-container {
    background: var(--header-bg);
    border-radius: 10px;
    padding: 40px;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.tracking-form {
    display: flex;
    margin-top: 25px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.tracking-input {
    flex: 1;
    padding: 15px 20px;
    border: 1px solid var(--primary);
    border-radius: 4px 0 0 4px;
    font-size: 1rem;
    background: var(--surface);
    color: var(--text);
}

.tracking-btn {
    background-color: var(--accent);
    color: white;
    border: none;
    padding: 0 25px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-weight: 600;
}

/* Features Section */
.features-section {
    background-color: var(--surface);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    align-items: center;
}

.feature-img {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.feature-img img {
    width: 100%;
    height: auto;
    display: block;
}

.feature-list {
    list-style: none;
}

.feature-list li {
    margin-bottom: 25px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.feature-icon {
    background-color: rgba(0, 86, 179, 0.1);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Testimonials */
.testimonials-section {
    background: linear-gradient(rgba(0, 86, 179, 0.05), rgba(0, 86, 179, 0.05));
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.testimonial-card {
    background-color: var(--surface);
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    position: relative;
}

.testimonial-card::before {
    content: '"';
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 4rem;
    color: rgba(0, 86, 179, 0.1);
    font-family: Georgia, serif;
    line-height: 1;
}

.testimonial-content {
    margin-bottom: 20px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
}

.author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Footer */
footer {
    background: linear-gradient(rgba(33, 37, 41, 0.95), rgba(33, 37, 41, 0.95)), 
                url('../img/bg2.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 60px 0 20px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-column h3 {
    color: white;
    margin-bottom: 25px;
    font-size: 1.3rem;
    position: relative;
    padding-bottom: 10px;
}

.footer-column h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: var(--accent);
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #bbb;
    line-height: 1.5;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: white;
    padding-left: 5px;
}

/* margin-top nudges the icon down to line up with the cap-height of the
   first line of text -- align-items:flex-start alone sits it at the very
   top of the flex box, which reads slightly high next to the text. */
.footer-links i {
    color: var(--accent);
    width: 16px;
    flex-shrink: 0;
    margin-top: 4px;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background-color: var(--accent);
    transform: translateY(-3px);
}

.copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #aaa;
    font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 992px) {
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .section {
        padding: 60px 0;
    }
}

/* =============================================
   SHARED QUOTE ITEM ROWS
   ============================================= */
/* Used by both the public quote page and the dashboard's Get Quote tab --
   both build their "what's in this shipment" rows from the same
   createItemRowHTML() in quote-engine.js, so one shared ruleset here keeps
   them visually identical instead of drifting into two implementations. */
.quote-items-section {
    margin-bottom: 25px;
}

.quote-items-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.quote-items-header label {
    font-weight: 600;
    color: var(--dark);
}

.quote-add-item-btn {
    background: none;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.quote-add-item-btn:hover {
    background: var(--primary);
    color: white;
}

.quote-item-row {
    position: relative;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px 52px 20px 20px;
    margin-bottom: 16px;
}

.quote-item-row-fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.quote-item-row-line {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 18px;
}

.quote-item-row-fields .form-group {
    margin-bottom: 0;
}

.quote-item-row-fields label {
    font-size: 0.85rem;
    margin-bottom: 6px;
}

/* Narrow weight/value columns don't have room for native spinner arrows
   without cropping the digits themselves (e.g. "800" rendering as "80"). */
.quote-item-row-fields input[type="number"]::-webkit-outer-spin-button,
.quote-item-row-fields input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quote-item-row-fields input[type="number"] {
    -moz-appearance: textfield;
}

.quote-item-remove {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    color: var(--text-faint);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.quote-item-remove:hover:not(:disabled) {
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
}

.quote-item-remove:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.quote-limited-service-note {
    font-size: 0.85rem;
    color: #b45309;
    background: rgba(217, 119, 6, 0.12);
    border-left: 3px solid #d97706;
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.quote-shipment-type-options {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.quote-radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    cursor: pointer;
}

.quote-radio-label input {
    accent-color: var(--accent, #2563eb);
}

/* =============================================
   SHARED QUOTE RESULT PANEL
   ============================================= */
/* Same reasoning as the item rows above: the public quote page and the
   dashboard's Get Quote tab both render their calculated price with this
   markup, so one ruleset keeps the two results looking like the same
   product instead of two different-looking calculators. */
.quote-result {
    background-color: var(--surface);
    border-radius: 10px;
    padding: 30px;
    margin-top: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border-left: 4px solid var(--accent);
    display: none;
}

.quote-result h3 {
    color: var(--primary);
    margin-bottom: 20px;
}

.quote-result-panel {
    background-color: var(--surface);
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border-left: 4px solid var(--accent);
}

.quote-result-panel h4 {
    color: var(--primary);
    margin-bottom: 18px;
}

.quote-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.quote-item {
    padding: 15px;
    background-color: rgba(0, 86, 179, 0.08);
    border-radius: 5px;
}

.quote-label {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 5px;
}

.quote-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
}

.quote-total {
    text-align: center;
    padding: 20px;
    background-color: var(--primary);
    color: white;
    border-radius: 5px;
    margin-top: 20px;
}

.quote-total .quote-label {
    color: rgba(255, 255, 255, 0.9);
}

.quote-total .quote-value {
    color: white;
    font-size: 1.8rem;
}

@media (max-width: 560px) {
    .quote-item-row-line {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .quote-item-row {
        padding: 18px 44px 18px 16px;
    }
}

@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block;
    }
    
    .nav-links {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        background-color: var(--surface);
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        gap: 0;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 999;
    }
    
    .nav-links.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    .nav-links li {
        width: 100%;
        text-align: center;
        padding: 15px 0;
        border-bottom: 1px solid var(--border);
    }

    .nav-links li#signInItem,
    .nav-links li:has(#logoutBtn),
    .nav-links li:has(a[href="dashboard.html"]) {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }

    .nav-links li:last-child {
        margin-left: 0;
        border-bottom: none;
        padding-top: 10px;
    }

    .hero {
        padding: 130px 0 80px;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .tracking-form {
        flex-direction: column;
    }
    
    .tracking-input {
        border-radius: 4px;
        margin-bottom: 10px;
    }
    
    .tracking-btn {
        border-radius: 4px;
        padding: 15px;
    }
}

/* =============================================
   SUPPORT CHAT BUBBLE
   ============================================= */
/* Shared by dashboard.html (Support tab only) and index.html (always visible)
   -- kept here rather than dashboard.css so the marketing page doesn't need
   to load a second, dashboard-specific stylesheet just for this widget. */
.chat-bubble-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.chat-bubble-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}

.chat-bubble-btn:hover {
    transform: scale(1.06);
}

/* Unread-reply count. Deliberately a fixed white pill with an accent-colored
   number rather than theme-following colors -- it needs to read clearly on
   top of the (always orange) bubble button in both light and dark mode. */
.chat-bubble-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #ffffff;
    color: var(--accent);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
    font-size: 0.7rem;
    font-weight: 800;
    align-items: center;
    justify-content: center;
}

.chat-panel {
    display: none;
    flex-direction: column;
    width: 320px;
    max-width: calc(100vw - 48px);
    height: 420px;
    max-height: calc(100vh - 120px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.chat-panel.open {
    display: flex;
}

.chat-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--accent);
    color: white;
    padding: 14px 16px;
}

.chat-panel-header strong {
    display: block;
    font-size: 0.95rem;
}

.chat-panel-header span {
    font-size: 0.75rem;
    opacity: 0.85;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-faint);
}

.chat-panel-header .modal-close {
    color: white;
}

.chat-panel-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-message {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    line-height: 1.4;
}

.chat-message.bot {
    align-self: flex-start;
    background: var(--surface-alt);
    color: var(--text);
    border-bottom-left-radius: 2px;
}

/* The automated 24h-gap away message -- dimmed a step further than a real
   support reply so it reads as a system note rather than a person typing. */
.chat-message.bot.automated {
    color: var(--text-muted);
    font-style: italic;
}

.chat-message.bot a {
    color: var(--accent);
    font-weight: 600;
}

.chat-message.user {
    align-self: flex-end;
    background: var(--accent);
    color: white;
    border-bottom-right-radius: 2px;
}

.chat-panel-input {
    display: flex;
    border-top: 1px solid var(--border);
}

.chat-panel-input input {
    flex: 1;
    border: none;
    padding: 12px 14px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.85rem;
}

.chat-panel-input input:focus {
    outline: none;
}

.chat-panel-input input:disabled {
    background: var(--surface-alt);
}

.chat-panel-input button {
    border: none;
    background: none;
    color: var(--accent);
    padding: 0 16px;
    cursor: pointer;
    font-size: 1rem;
}

@media (max-width: 480px) {
    .chat-bubble-widget {
        bottom: 16px;
        right: 16px;
    }

    .chat-panel {
        width: calc(100vw - 32px);
    }
}