.page-template-default {
    padding: 0 1px;
}

/* ============================
   Zephyr Auto Glass — Quote UI overrides
   Load AFTER the vendor CSS shown above
   ============================ */

/* Palette + tokens */
:root {
    --zep-primary: #412f91;
    --zep-primary-muted: #f3f1ff;
    --zep-accent: #ffd75e;
    --zep-text: #111827;
    --zep-text-dim: #475569;
    --zep-text-dark: #1a1a1a;
    --zep-border: #cbd5e1;
    --zep-surface: #f8fafc;
    --zep-white: #ffffff;
    --zep-radius: 12px;
    --zep-radius-sm: 0.75rem;
    --zep-input-h: 48px;
    --zep-focus: 0 0 0 2px rgba(165, 180, 252, 0.6);
}

.agcrm-vd-search-box-wrapper,
.appointment-information,
.modal {
    font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter,
    "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
    color: var(--zep-text);
    font-size: 1rem;
    line-height: 1.5;
}

/* ===== Tabs ===== */
#agcrm-vd-search-tabs {
    display: flex;
    gap: .5rem;
    list-style: none;
    padding: .5rem;
    margin: 0 0 1rem 0;
    background: #ffffff;
    border: none;
    border-radius: var(--zep-radius);
}
#agcrm-vd-search-tabs > li {
    cursor: pointer;
    padding: .5rem .9rem;
    background: var(--zep-primary-muted);
    border-radius: 10px;
    font-weight: 700;
    border: 1px solid #F3F4F6;
    transition: all .18s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

#agcrm-vd-search-tabs > li:hover {
    color: var(--zep-primary);
    background: var(--zep-primary-muted);
    opacity: 0.9;
}
#agcrm-vd-search-tabs > li.active,
.agcrm-vd-search-tabs > .active { /* override vendor */
    background: var(--zep-accent);
    color: var(--zep-text-dark);
    border-color: var(--zep-accent);
}

/* ===== Card containers ===== */
.agcrm-vd-search-box {
    padding: 0 !important;
}

.agcrm-vd-search-box,
.vd-chat-bubble,
#vd-vehicle-data,
#vd-matching-parts {
    background: var(--zep-white);
    border: none !important;
    border-radius: var(--zep-radius);
}

.bg-blue-pale,
.agcrm-vd-search-box,
.agcrm-vd-search-tabs > .active {
    background: var(--zep-white); /* kill the blue panels */
}

/* Chat bubble previously tinted blue */
.vd-chat-bubble {
    margin: 1rem 0;
    border: 1px solid var(--zep-primary-muted) !important;
    padding: 1rem;
}

@media (min-width: 640px) {
    padding: 1rem 2rem;
}

.vd-chat-bubble span {
    color: var(--zep-text-dark) !important;
}

/* ===== Labels ===== */
.appointment-information label,
.agcrm-vd-search-box-wrapper label {
    font-weight: 600;
    color: var(--zep-text-dim);
    margin-bottom: .35rem;
    display: block;
}

/* ===== Inputs / selects ===== */
.appointment-information input[type="text"],
.appointment-information input[type="tel"],
.appointment-information input[type="number"],
.appointment-information select,
.agcrm-vd-search-box-wrapper input[type="text"],
.agcrm-vd-search-box-wrapper input[type="number"],
.agcrm-vd-search-box-wrapper select {
    height: var(--zep-input-h);
    border: 1px solid var(--zep-border);
    border-radius: var(--zep-radius-sm);
    background: var(--zep-white);
    color: var(--zep-text);
    box-shadow: inset 0 1px 0 rgba(2,6,23,.02);
    width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    transition: all 0.2s ease;
}

#pay-method-select {
    margin-top: .3rem;
}

.appointment-information input[type="text"]:disabled,
.appointment-information input[type="tel"]:disabled,
.appointment-information input[type="number"]:disabled,
.appointment-information select:disabled,
.agcrm-vd-search-box-wrapper input[type="text"]:disabled,
.agcrm-vd-search-box-wrapper input[type="number"]:disabled,
.agcrm-vd-search-box-wrapper select:disabled,
.agcrm-vd-search-box-wrapper input[type="text"]:disabled,
#vd-search:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--zep-white) !important;
}

.appointment-information input:focus,
.appointment-information select:focus,
.agcrm-vd-search-box-wrapper input:focus,
.agcrm-vd-search-box-wrapper select:focus {
    outline: none;
    border-color: #818cf8;
    box-shadow: var(--zep-focus);
}

/* Nice caret for native selects */
.appointment-information select,
.agcrm-vd-search-box-wrapper select,
.vd-glass-opts-select {
}

/* ===== Buttons ===== */
.agcrm-vd-search-box-wrapper .btn-dark,
.appointment-information .btn-dark,
.modal .btn-dark,
.filter-function-buttons .btn-dark,
.agcrm-modal.modal .btn-dark {
    background-color: var(--zep-accent);
    border: 1px solid var(--zep-accent);
    color: var(--zep-text-dark);
    font-weight: 700;
    border-radius: 10px;
    padding: 10px 18px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transition: transform .05s ease, background .15s ease, box-shadow .15s ease;
}
.agcrm-vd-search-box-wrapper .btn-dark:hover,
.appointment-information .btn-dark:hover,
.modal .btn-dark:hover,
.filter-function-buttons .btn-dark:hover,
.agcrm-modal.modal .btn-dark:hover,
.agcrm-vd-search-box-wrapper .btn-dark:focus,
.appointment-information .btn-dark:focus,
.modal .btn-dark:focus,
.filter-function-buttons .btn-dark:focus,
.agcrm-modal.modal .btn-dark:focus{
    opacity: 0.9;
    background-color: var(--zep-accent);
    border: 1px solid var(--zep-accent);
}

.agcrm-vd-search-box-wrapper .btn-dark:focus,
.appointment-information .btn-dark:focus,
.modal .btn-dark:focus,
.filter-function-buttons .btn-dark:focus,
.agcrm-modal.modal .btn-dark:focus {
    opacity: 0.9;
    background-color: var(--zep-accent);
    border: 1px solid var(--zep-accent);
    outline: none;
}

.agcrm-vd-search-box-wrapper .btn-dark:active,
.appointment-information .btn-dark:active,
.modal .btn-dark:active,
.filter-function-buttons .btn-dark:active,
.agcrm-modal.modal .btn-dark:active {
    transform: translateY(1px);
}


#agcrm-vd-reset-form.btn-dark,
.agcrm-modal.modal .btn-pale {
    background: #ffffff;
    border-color: #ffffff;
    border-radius: 10px;
    padding: 10px 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: transform .05s ease, background .15s ease, box-shadow .15s ease;
    color: var(--zep-text-dark);
}

.agcrm-modal.modal .btn-pale:hover,
.agcrm-modal.modal .btn-pale:focus {
    background: #ffffff;
    border-color: #ffffff;
}

/* ===== Glass option selects grid ===== */
#glass-selectors {
    gap: .75rem;
    grid-template-columns: 1fr;
    margin-top: 1rem;
}
@media (min-width: 640px) {
    #glass-selectors { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.vd-glass-opts-select {
    height: var(--zep-input-h);
    border: 1px solid var(--zep-border);
    border-radius: var(--zep-radius-sm);
    padding: 0 .9rem;
}

/* ===== Results columns ===== */
#vd-vehicle-data h3,
#vd-matching-parts h3,
.appointment-information h4 {
    margin: .4rem 0 .2rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--zep-text);
}

/* ===== Insurance accordion ===== */
.appointment-information .insurance-container {
    background: var(--zep-surface);
    border: 1px dashed var(--zep-border);
    border-radius: 10px;
    padding: .75rem;
}
.appointment-information .insurance-container .heading {
    font-weight: 700;
    color: var(--zep-text);
}

/* ===== Calendar polish ===== */
.appointment-information .popup-calendar {
    background: var(--zep-white);
    border: 1px solid var(--zep-border);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(2,6,23,.06);
}
.appointment-information .pc-calendar-body th {
    background: #eef2ff;
    border-color: var(--zep-border);
}
.appointment-information .pc-calendar-body td,
.appointment-information .pc-calendar-body th {
    border: 1px solid var(--zep-border);
}
.appointment-information .pc-calendar-body .today { background: #fff3cd; }
.appointment-information .pc-calendar-body .open:hover { background: #eef2ff; }
.appointment-information .pc-calendar-body .selected { background: #e0e7ff; }

/* ===== Small layout niceties ===== */
.agcrm-vd-search-box-wrapper .buttons,
.appointment-information .buttons { display: flex; gap: .5rem; flex-wrap: wrap; }

.agcrm-vd-search-box-wrapper .vd-photos-container .vd-photo img {
    border-radius: 8px;
}

.agcrm-vd-search-box-wrapper label,
.appointment-information label {
    font-size: 0.875rem !important;
    font-weight: 600;
    line-height: 1.4;
}

.agcrm-vd-search-box-wrapper input,
.agcrm-vd-search-box-wrapper select,
.appointment-information input,
.appointment-information select {
    font-size: 1rem !important;
}

.agcrm-vd-search-box-wrapper .btn-dark,
.appointment-information .btn-dark,
.modal .btn-dark,
.filter-function-buttons .btn-dark{
    font-size: 0.9375rem !important;
    font-weight: 700;
    text-transform: none;
    letter-spacing: .01em;
}

#vd-vehicle-data h3,
#vd-matching-parts h3,
.appointment-information h4 {
    font-size: 1.125rem !important;
    font-weight: 700;
}

.agcrm-modal.modal {
    background-color: rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}

.agcrm-modal .modal-content {
    max-width: 100% !important;
    width: 100%;
}

@media (min-width: 768px) {
    .agcrm-modal .modal-content {
        max-width: 700px !important;
        width: 80%;
    }
}

/* Zephyr Van Loader Styles */
.is-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
}

.is-loading .loader {
    animation: none !important;
    border: none !important;
    border-radius: 0 !important;
    height: auto !important;
    width: auto !important;
    background: none !important;
    box-sizing: content-box !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Scale SVG nicely */
.is-loading .loader svg {
    width: 175px;   /* adjust as needed */
    height: auto;
    display: block;
    overflow: visible;
}

/* Van bounce */
#van-body {
    animation: van-bob 1.2s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center bottom;
}

/* Wheels spin */
.wheel {
    animation: wheel-spin .6s linear infinite;
    transform-box: fill-box;   /* key for <g> and <path> */
    transform-origin: center;  /* center of each wheel group */
}

@keyframes wheel-spin {
    0% {
        transform: rotate(0deg) translateY(0);
    }
    25% {
        transform: rotate(90deg) translateY(-5px);
    }
    50% {
        transform: rotate(180deg) translateY(0);
    }
    75% {
        transform: rotate(270deg) translateY(5px);
    }
    100% {
        transform: rotate(360deg) translateY(0);
    }
}

@keyframes van-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}