:root {
  --component-badge-height: 28px;
  --component-badge-padding-inline: var(--space-md);
  --component-overlay-background: rgba(30, 42, 54, 0.68);
  --component-modal-width: 640px;
  --component-toast-width: 360px;
  --component-skeleton-base: var(--color-light-gray);
  --component-skeleton-highlight: var(--color-sand);
  --component-card-media-ratio: 16 / 10;
  --component-card-border: var(--border-subtle);
  --component-card-background: var(--color-warm-white);
  --component-status-success-surface: color-mix(in srgb, var(--color-success) 14%, var(--color-warm-white));
  --component-status-warning-surface: color-mix(in srgb, var(--color-warning) 16%, var(--color-warm-white));
  --component-status-info-surface: color-mix(in srgb, var(--color-info) 12%, var(--color-warm-white));
  --component-status-error-surface: color-mix(in srgb, var(--color-error) 12%, var(--color-warm-white));
  --component-status-neutral-surface: color-mix(in srgb, var(--color-neutral) 10%, var(--color-warm-white));
  --component-transition-duration: 160ms;
}

.ag-badge { min-height: var(--component-badge-height); display: inline-flex; align-items: center; gap: var(--space-xs); max-width: 100%; padding: var(--space-xs) var(--component-badge-padding-inline); border: var(--border-width-sm) solid currentColor; border-radius: var(--radius-round); font-size: var(--text-small-size); line-height: var(--text-small-line); font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; }
.ag-badge--success { color: var(--color-success); background: var(--component-status-success-surface); }
.ag-badge--warning { color: var(--color-warning); background: var(--component-status-warning-surface); }
.ag-badge--info { color: var(--color-info); background: var(--component-status-info-surface); }
.ag-badge--error { color: var(--color-error); background: var(--component-status-error-surface); }
.ag-badge--neutral { color: var(--color-neutral); background: var(--component-status-neutral-surface); }
.ag-badge-group { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

.ag-chip { min-height: 36px; display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-md); border: var(--border-subtle); border-radius: var(--radius-round); background: var(--color-warm-white); color: var(--color-charcoal); font-weight: var(--font-weight-semibold); transition: border-color var(--component-transition-duration), background-color var(--component-transition-duration), box-shadow var(--component-transition-duration); }
.ag-chip--selected { border-color: var(--color-caspian-blue); background: var(--component-status-info-surface); color: var(--color-deep-navy); }
.ag-chip--removable { padding-inline-end: var(--space-xs); }
.ag-chip--disabled, .ag-chip[aria-disabled="true"] { opacity: var(--control-disabled-opacity); cursor: not-allowed; }
.ag-chip__remove { min-inline-size: var(--control-touch-target); min-block-size: var(--control-touch-target); inline-size: var(--control-touch-target); block-size: var(--control-touch-target); display: inline-grid; place-items: center; border: 0; border-radius: var(--radius-circle); background: transparent; color: inherit; cursor: pointer; }
.ag-chip__remove:focus-visible { outline: 0; box-shadow: var(--control-focus-ring); }

.ag-icon { display: inline-block; inline-size: 1.15em; block-size: 1.15em; flex: 0 0 auto; background-color: currentColor; -webkit-mask: var(--ag-icon) center / contain no-repeat; mask: var(--ag-icon) center / contain no-repeat; }
.ag-icon--heart { --ag-icon: url("../icons/icon-heart.svg"); }
.ag-icon--user { --ag-icon: url("../icons/icon-user.svg"); }
.ag-icon--menu { --ag-icon: url("../icons/icon-menu.svg"); }
.ag-icon--location { --ag-icon: url("../icons/icon-location.svg"); }
.ag-icon--calendar { --ag-icon: url("../icons/icon-calendar.svg"); }
.ag-icon--search { --ag-icon: url("../icons/icon-search.svg"); }
.ag-icon--car { --ag-icon: url("../icons/icon-car.svg"); }
.ag-icon--shield { --ag-icon: url("../icons/icon-shield.svg"); }
.ag-icon--support { --ag-icon: url("../icons/icon-support.svg"); }
.ag-icon--refresh {
  --ag-icon: url("../icons/icon-refresh.svg");
}
.ag-icon--home { --ag-icon: url("../icons/icon-home.svg"); }
.ag-icon--booking { --ag-icon: url("../icons/icon-booking.svg"); }

.ag-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); color: var(--color-deep-navy); font-weight: var(--font-weight-semibold); }
.ag-benefits > * { min-width: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-sm); }
.ag-benefits--compact { padding: var(--space-md) var(--space-lg); font-size: var(--text-small-size); }
.ag-benefits--compact .ag-icon { inline-size: 18px; block-size: 18px; }

.ag-alert, .ag-toast { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-md); min-width: 0; padding: var(--space-lg); border: var(--border-width-sm) solid currentColor; border-radius: var(--radius-lg); background: var(--color-warm-white); color: var(--color-charcoal); }
.ag-alert__marker, .ag-toast__marker { font-weight: var(--font-weight-bold); color: currentColor; }
.ag-alert__title, .ag-toast__title { margin: 0; color: var(--color-deep-navy); font-weight: var(--font-weight-semibold); }
.ag-alert__text, .ag-toast__text { margin: var(--space-xs) 0 0; color: var(--color-charcoal); }
.ag-alert__actions, .ag-toast__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.ag-alert__dismiss, .ag-toast__close, .ag-modal__close, .ag-vehicle-card__favorite { min-inline-size: var(--control-touch-target); min-block-size: var(--control-touch-target); inline-size: var(--control-touch-target); block-size: var(--control-touch-target); display: inline-grid; place-items: center; border: var(--border-subtle); border-radius: var(--radius-circle); background: var(--color-warm-white); color: var(--color-deep-navy); cursor: pointer; }
.ag-alert__dismiss:focus-visible, .ag-toast__close:focus-visible, .ag-modal__close:focus-visible, .ag-vehicle-card__favorite:focus-visible { outline: 0; box-shadow: var(--control-focus-ring); }
.ag-alert--success, .ag-toast--success { color: var(--color-success); background: var(--component-status-success-surface); }
.ag-alert--warning { color: var(--color-warning); background: var(--component-status-warning-surface); }
.ag-alert--error, .ag-toast--error { color: var(--color-error); background: var(--component-status-error-surface); }
.ag-alert--info, .ag-toast--info { color: var(--color-info); background: var(--component-status-info-surface); }
.ag-alert--neutral { color: var(--color-neutral); background: var(--component-status-neutral-surface); }
.ag-toast { width: min(100%, var(--component-toast-width)); box-shadow: var(--shadow-sm); }

.ag-modal { display: grid; place-items: center; padding: var(--space-lg); background: var(--component-overlay-background); border-radius: var(--radius-xl); }
.ag-modal__dialog { width: min(100%, var(--component-modal-width)); background: var(--component-card-background); border: var(--component-card-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); overflow: hidden; }
.ag-modal__header, .ag-modal__footer { display: flex; gap: var(--space-md); align-items: center; justify-content: space-between; padding: var(--space-lg); border-bottom: var(--border-subtle); }
.ag-modal__footer { border-top: var(--border-subtle); border-bottom: 0; justify-content: flex-end; flex-wrap: wrap; }
.ag-modal__title { margin: 0; color: var(--color-deep-navy); }
.ag-modal__body { padding: var(--space-lg); display: grid; gap: var(--space-md); }
.ag-modal--success .ag-modal__dialog { border-color: var(--color-success); }
.ag-modal--error .ag-modal__dialog { border-color: var(--color-error); }
.ag-modal--loading .ag-modal__dialog { opacity: 0.96; }
.ag-vehicle-preview { position: fixed; inset: 0; z-index: calc(var(--ag-layer-mobile-header, 320) + 20); overflow-y: auto; border-radius: 0; }
.ag-vehicle-preview[hidden] { display: none; }
.ag-vehicle-preview-open { overflow: hidden; }
.ag-vehicle-preview__dialog { width: min(100%, 760px); max-height: calc(100dvh - (var(--space-lg) * 2)); overflow-y: auto; }
.ag-vehicle-preview__body { gap: var(--space-lg); }
.ag-vehicle-preview__body > p { margin: 0; }
.ag-vehicle-preview__overview { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-lg); align-items: start; }
.ag-vehicle-preview__media { height: clamp(160px, 24vh, 210px); overflow: hidden; border-radius: var(--radius-lg); background: var(--color-light-gray); }
.ag-vehicle-preview__image, .ag-vehicle-preview__media .ag-vehicle-card__fallback { display: block; width: 100%; height: 100%; object-fit: contain; }
.ag-vehicle-preview__specifications { min-width: 0; }
.ag-vehicle-preview__section-title { margin: 0 0 var(--space-md); color: var(--color-deep-navy); font-size: 15px; font-weight: var(--font-weight-semibold); }
.ag-vehicle-preview__specification-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin: 0; }
.ag-vehicle-preview__specification { display: grid; gap: var(--space-xs); min-width: 0; padding: var(--space-sm); border: var(--border-subtle); border-radius: var(--radius-md); background: var(--color-warm-white); }
.ag-vehicle-preview__specification dt { color: var(--color-neutral); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.ag-vehicle-preview__specification dd { min-width: 0; margin: 0; color: var(--color-deep-navy); font-size: 13px; font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; }
.ag-vehicle-preview__availability { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--component-status-info-surface); color: var(--color-deep-navy); font-size: var(--text-small-size); }
.ag-vehicle-preview__availability::before { flex: 0 0 8px; width: 8px; height: 8px; border-radius: var(--radius-circle); background: var(--color-caspian-blue); content: ""; }
.ag-vehicle-preview__rental { padding: var(--space-md); border: var(--border-subtle); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-sand) 32%, var(--color-warm-white)); }
.ag-vehicle-preview__rental-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding-block: var(--space-sm); border-top: var(--border-subtle); }
.ag-vehicle-preview__rental-row > span { color: var(--color-neutral); font-size: var(--text-small-size); }
.ag-vehicle-preview__rental-row > strong { color: var(--color-deep-navy); font-size: 14px; font-weight: var(--font-weight-semibold); text-align: end; }
.ag-vehicle-preview__rental-row--prepayment { margin: var(--space-xs) calc(var(--space-sm) * -1) 0; padding-inline: var(--space-sm); border-top-color: transparent; border-radius: var(--radius-md); background: var(--component-status-info-surface); }
.ag-vehicle-preview__price { display: flex; align-items: baseline; gap: var(--space-xs); margin: 0; }
.ag-vehicle-preview__price strong { color: var(--color-brand-gold); font-size: var(--text-h4-size); white-space: nowrap; }
.ag-vehicle-preview__price > span { color: var(--color-neutral); font-size: var(--text-small-size); }

.ag-spinner { inline-size: 1.25em; block-size: 1.25em; display: inline-block; border: var(--border-width-md) solid currentColor; border-block-start-color: transparent; border-radius: var(--radius-circle); animation: ag-component-spin 800ms linear infinite; }
.ag-loading-block { display: grid; place-items: center; gap: var(--space-md); min-height: 160px; padding: var(--space-xl); border: var(--component-card-border); border-radius: var(--radius-lg); background: var(--component-card-background); color: var(--color-deep-navy); text-align: center; }
.ag-progress { position: relative; block-size: 8px; overflow: hidden; border-radius: var(--radius-round); background: var(--component-skeleton-base); }
.ag-progress::before { content: ""; position: absolute; inset-block: 0; inline-size: 42%; border-radius: inherit; background: var(--color-caspian-blue); animation: ag-component-progress 1200ms ease-in-out infinite; }
.ag-loading-label { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-deep-navy); font-weight: var(--font-weight-semibold); }

.ag-skeleton { display: block; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--component-skeleton-base), var(--component-skeleton-highlight), var(--component-skeleton-base)); background-size: 200% 100%; animation: ag-component-skeleton 1200ms ease-in-out infinite; }
.ag-skeleton--text { block-size: 1em; margin-block: var(--space-sm); }
.ag-skeleton--short { inline-size: 45%; }
.ag-skeleton--medium { inline-size: 70%; }
.ag-skeleton--media { aspect-ratio: var(--component-card-media-ratio); border-radius: var(--radius-lg); }
.ag-skeleton-card, .ag-skeleton-row { display: grid; gap: var(--space-md); padding: var(--space-lg); border: var(--component-card-border); border-radius: var(--radius-lg); background: var(--component-card-background); }
.ag-skeleton-row { grid-template-columns: 56px 1fr; align-items: center; }

.ag-empty-state, .ag-status-result { display: grid; justify-items: center; gap: var(--space-md); padding: var(--space-2xl); border: var(--component-card-border); border-radius: var(--radius-xl); background: var(--component-card-background); text-align: center; }
.ag-empty-state__visual, .ag-status-result__icon { inline-size: 72px; block-size: 72px; display: grid; place-items: center; border-radius: var(--radius-circle); background: var(--color-light-gray); color: var(--color-neutral); font-weight: var(--font-weight-bold); }
.ag-empty-state__title, .ag-status-result__title { margin: 0; color: var(--color-deep-navy); }
.ag-empty-state__text, .ag-status-result__text { margin: 0; color: var(--color-neutral); max-width: 52ch; }
.ag-status-result--success .ag-status-result__icon { background: var(--component-status-success-surface); color: var(--color-success); }
.ag-status-result--pending .ag-status-result__icon { background: var(--component-status-warning-surface); color: var(--color-warning); }
.ag-status-result--error .ag-status-result__icon { background: var(--component-status-error-surface); color: var(--color-error); }

.ag-notification { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-md); align-items: start; padding: var(--space-lg); border: var(--component-card-border); border-radius: var(--radius-lg); background: var(--component-card-background); }
.ag-notification--unread { border-color: var(--color-caspian-blue); background: var(--component-status-info-surface); }
.ag-notification--warning { border-color: var(--color-warning); background: var(--component-status-warning-surface); }
.ag-notification--system { border-style: dashed; }
.ag-notification__marker { inline-size: 32px; block-size: 32px; display: grid; place-items: center; border-radius: var(--radius-circle); background: var(--color-light-gray); color: var(--color-deep-navy); }
.ag-notification__title { margin: 0; color: var(--color-deep-navy); font-weight: var(--font-weight-semibold); }
.ag-notification__text, .ag-notification__meta { margin: var(--space-xs) 0 0; color: var(--color-neutral); overflow-wrap: anywhere; }
.ag-notification__action { justify-self: end; }

.ag-card, .ag-vehicle-card, .ag-booking-card, .ag-support-card, .ag-metric-card, .ag-financial-summary { min-width: 0; border: var(--component-card-border); border-radius: var(--radius-xl); background: var(--component-card-background); box-shadow: var(--shadow-xs); }
.ag-card:focus-within, .ag-booking-card:focus-within, .ag-support-card:focus-within, .ag-metric-card:focus-within { box-shadow: var(--control-focus-ring); }
.ag-vehicle-card { display: grid; overflow: hidden; }
.ag-vehicle-card__media-link { display: block; inline-size: 100%; block-size: 100%; color: inherit; text-decoration: none; }
.ag-vehicle-card__media-link:focus-visible { outline-offset: -3px; }
.ag-vehicle-card__fallback-content { display: grid; inline-size: 100%; block-size: 100%; place-content: center; justify-items: center; gap: var(--space-sm); color: var(--color-neutral); font-size: var(--text-small-size); }
.ag-vehicle-card__fallback-content .ag-icon { inline-size: 32px; block-size: 32px; color: var(--color-caspian-blue); }
.ag-vehicle-card--catalog { height: 100%; }
.ag-vehicle-card--catalog .ag-vehicle-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-light-gray); }
.ag-vehicle-card--catalog .ag-vehicle-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; }
.ag-vehicle-card--catalog .ag-vehicle-card__body { grid-template-rows: auto auto auto auto auto auto auto 1fr auto; gap: 6px; padding: 13px; }
.ag-vehicle-card--catalog .ag-vehicle-card__body p { margin: 0; }
.ag-vehicle-card--catalog .ag-vehicle-card__title { min-height: 42px; font-size: 15px; line-height: 21px; }
.ag-vehicle-card--catalog .ag-vehicle-card__meta { font-size: 11px; line-height: 16px; }
.ag-vehicle-card--catalog .ag-vehicle-card__price { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; color: var(--color-brand-gold); font-size: 19px; }
.ag-vehicle-card--catalog .ag-vehicle-card__price > span { color: var(--color-neutral); font-size: 11px; font-weight: var(--font-weight-regular); }
.ag-vehicle-card--catalog .ag-vehicle-card__actions { align-self: end; flex-wrap: nowrap; margin-top: 5px; }
.ag-vehicle-card--catalog .ag-vehicle-card__actions .ag-button { width: 50%; min-height: 40px; padding-inline: 8px; font-size: 12px; }
.ag-vehicle-card--compact { grid-template-columns: minmax(140px, 220px) 1fr; }
.ag-vehicle-card--disabled { opacity: var(--control-disabled-opacity); }
.ag-vehicle-card__media { position: relative; aspect-ratio: var(--component-card-media-ratio); display: grid; place-items: center; background: linear-gradient(135deg, var(--color-light-gray), var(--color-sand)); color: var(--color-neutral); font-weight: var(--font-weight-semibold); }
.ag-vehicle-card__favorite { position: absolute; inset-block-start: var(--space-md); inset-inline-end: var(--space-md); }
.ag-vehicle-card__body, .ag-booking-card__body, .ag-support-card, .ag-metric-card, .ag-financial-summary { display: grid; gap: var(--space-md); padding: var(--space-lg); }
.ag-vehicle-card__title, .ag-booking-card__title, .ag-support-card__title, .ag-metric-card__label { margin: 0; color: var(--color-deep-navy); overflow-wrap: anywhere; }
.ag-vehicle-card__meta, .ag-booking-card__meta, .ag-support-card__text, .ag-metric-card__support { margin: 0; color: var(--color-neutral); overflow-wrap: anywhere; }
.ag-vehicle-card__price { color: var(--color-deep-navy); font-size: var(--text-h4-size); font-weight: var(--font-weight-bold); }
.ag-vehicle-card__actions, .ag-booking-card__actions, .ag-support-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.ag-booking-card { display: grid; gap: var(--space-md); }
.ag-booking-card__header { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); padding: var(--space-lg) var(--space-lg) 0; }
.ag-booking-card__statuses { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.ag-booking-card__finance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.ag-booking-card__finance-item { padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-light-gray); overflow-wrap: anywhere; }
.ag-booking-card--compact .ag-booking-card__finance { grid-template-columns: 1fr; }

.ag-support-card__contact { display: grid; gap: var(--space-xs); color: var(--color-deep-navy); overflow-wrap: anywhere; }
.ag-metric-card__value { color: var(--color-deep-navy); font-size: var(--text-h2-size); line-height: var(--text-h2-line); font-weight: var(--font-weight-bold); }
.ag-metric-card__trend { justify-self: start; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-round); background: var(--component-status-neutral-surface); color: var(--color-neutral); font-size: var(--text-small-size); }

.ag-financial-summary__row { display: flex; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-sm); border-bottom: var(--border-subtle); overflow-wrap: anywhere; }
.ag-financial-summary__row > span:first-child { color: var(--color-neutral); }
.ag-financial-summary__row > span:last-child { color: var(--color-deep-navy); font-weight: var(--font-weight-semibold); text-align: end; }
.ag-financial-summary__row--total { margin-top: var(--space-sm); padding-top: var(--space-md); border-top: var(--border-strong); border-bottom: 0; }
.ag-financial-summary__note { margin: 0; color: var(--color-neutral); font-size: var(--text-small-size); }

@keyframes ag-component-spin { to { transform: rotate(360deg); } }
@keyframes ag-component-progress { 0% { transform: translateX(-110%); } 100% { transform: translateX(240%); } }
@keyframes ag-component-skeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
  .ag-spinner, .ag-progress::before, .ag-skeleton { animation-duration: 1ms; animation-iteration-count: 1; }
}

@media (max-width: 767px) {
  .ag-alert, .ag-toast, .ag-notification { grid-template-columns: auto minmax(0, 1fr); }
  .ag-alert__dismiss, .ag-toast__close, .ag-notification__action { grid-column: 2; justify-self: start; }
  .ag-modal { padding: var(--space-sm); }
  .ag-modal__footer { flex-direction: column; align-items: stretch; }
  .ag-modal__footer .ag-button, .ag-vehicle-card__actions .ag-button, .ag-booking-card__actions .ag-button, .ag-support-card__actions .ag-button { width: 100%; }
  .ag-vehicle-preview__dialog { max-height: calc(100dvh - (var(--space-sm) * 2)); }
  .ag-vehicle-preview__overview { grid-template-columns: 1fr; gap: var(--space-md); }
  .ag-vehicle-preview__media { height: clamp(148px, 28vh, 190px); }
  .ag-vehicle-preview__rental-row { gap: var(--space-sm); }
  .ag-vehicle-preview__price { flex-wrap: wrap; justify-content: flex-end; }
  .ag-vehicle-card--compact { grid-template-columns: 1fr; }
  .ag-booking-card__finance { grid-template-columns: 1fr; }
  .ag-financial-summary__row { flex-direction: column; gap: var(--space-xs); }
  .ag-financial-summary__row > span:last-child { text-align: start; }
}
.ag-icon--back {
  --ag-icon: url("../icons/icon-back.svg");
}

.ag-vehicle-card__prepayment {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-sm);
    min-width: 0;
    margin: 0;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    background: var(--component-status-info-surface);
    color: var(--color-neutral);
    font-size: var(--text-small-size);
    overflow-wrap: anywhere;
}
.ag-vehicle-card__prepayment strong {
    min-width: 0;
    color: var(--color-deep-navy);
    overflow-wrap: anywhere;
}
.azergid-car-card__prepayment {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-sm);
    min-width: 0;
    margin: 0 0 var(--space-md);
    color: var(--color-neutral);
    font-size: var(--text-small-size);
    overflow-wrap: anywhere;
}
.azergid-car-card__prepayment strong {
    min-width: 0;
    color: var(--color-deep-navy);
    overflow-wrap: anywhere;
}