/**
 * VHP Component Library
 * =====================
 * Reusable UI components consuming VHP design tokens.
 * Provides a unified visual language across all pages.
 *
 * Depends on: vhp-design-tokens.css
 * Load order: AFTER vhp-design-tokens.css, BEFORE page-specific CSS.
 *
 * @version 1.0.0
 * @date    2026-03-01
 */


/* ========================================================================
   BASE RESET / NORMALIZATION (token-powered)
   ======================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ========================================================================
   BUTTONS
   ======================================================================== */

.vhp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vhp-space-2);
    height: 40px;
    padding: 0 var(--vhp-space-4);
    font-family: var(--vhp-font-family);
    font-size: var(--vhp-font-base);
    font-weight: var(--vhp-weight-semibold);
    line-height: var(--vhp-leading-tight);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: var(--vhp-radius-sm);
    transition:
        background-color var(--vhp-duration-fast) var(--vhp-ease-default),
        border-color var(--vhp-duration-fast) var(--vhp-ease-default),
        color var(--vhp-duration-fast) var(--vhp-ease-default),
        box-shadow var(--vhp-duration-fast) var(--vhp-ease-default),
        transform var(--vhp-duration-fast) var(--vhp-ease-default);
}

.vhp-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--vhp-ring-width) var(--vhp-ring-color);
}

.vhp-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.vhp-btn:disabled,
.vhp-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary (Blue Fill) */
.vhp-btn--primary {
    background-color: var(--vhp-color-primary);
    border-color: var(--vhp-color-primary);
    color: var(--vhp-white);
}

.vhp-btn--primary:hover {
    background-color: var(--vhp-color-primary-hover);
    border-color: var(--vhp-color-primary-hover);
    color: var(--vhp-white);
}

.vhp-btn--primary:active:not(:disabled) {
    background-color: var(--vhp-blue-800);
}

/* Secondary (Blue Outline) */
.vhp-btn--secondary {
    background-color: var(--vhp-white);
    border-color: var(--vhp-color-primary);
    color: var(--vhp-color-primary);
}

.vhp-btn--secondary:hover {
    background-color: var(--vhp-blue-50);
    color: var(--vhp-color-primary-hover);
}

/* Success (Green Fill) */
.vhp-btn--success {
    background-color: var(--vhp-color-success);
    border-color: var(--vhp-color-success);
    color: var(--vhp-white);
}

.vhp-btn--success:hover {
    background-color: var(--vhp-green-600);
    border-color: var(--vhp-green-600);
    color: var(--vhp-white);
}

/* Danger (Red Fill) */
.vhp-btn--danger {
    background-color: var(--vhp-color-danger);
    border-color: var(--vhp-color-danger);
    color: var(--vhp-white);
}

.vhp-btn--danger:hover {
    background-color: var(--vhp-red-600);
    border-color: var(--vhp-red-600);
    color: var(--vhp-white);
}

/* Warning (Orange Fill) */
.vhp-btn--warning {
    background-color: var(--vhp-color-warning);
    border-color: var(--vhp-color-warning);
    color: var(--vhp-white);
}

.vhp-btn--warning:hover {
    background-color: var(--vhp-orange-700);
    border-color: var(--vhp-orange-700);
    color: var(--vhp-white);
}

/* Ghost (Transparent) */
.vhp-btn--ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--vhp-color-primary);
}

.vhp-btn--ghost:hover {
    background-color: var(--vhp-blue-50);
    color: var(--vhp-color-primary-hover);
}

/* Link-style Button */
.vhp-btn--link {
    background-color: transparent;
    border-color: transparent;
    color: var(--vhp-color-link);
    padding: 0;
    height: auto;
    font-weight: var(--vhp-weight-normal);
    text-decoration: underline;
}

.vhp-btn--link:hover {
    color: var(--vhp-color-link-hover);
}

/* ---- Size Variants ---- */

.vhp-btn--xs {
    height: 28px;
    padding: 0 var(--vhp-space-2);
    font-size: var(--vhp-font-xs);
}

.vhp-btn--sm {
    height: 32px;
    padding: 0 var(--vhp-space-3);
    font-size: var(--vhp-font-sm);
}

.vhp-btn--lg {
    height: 48px;
    padding: 0 var(--vhp-space-6);
    font-size: var(--vhp-font-md);
}

.vhp-btn--block {
    display: flex;
    width: 100%;
}

/* ---- Loading State ---- */

.vhp-btn--loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.vhp-btn--loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: vhp-spin 0.6s linear infinite;
    top: 50%;
    left: 50%;
    margin-top: -9px;
    margin-left: -9px;
}

.vhp-btn--primary.vhp-btn--loading::after,
.vhp-btn--success.vhp-btn--loading::after,
.vhp-btn--danger.vhp-btn--loading::after,
.vhp-btn--warning.vhp-btn--loading::after {
    border-color: rgba(255, 255, 255, 0.4);
    border-right-color: transparent;
}


/* ========================================================================
   FORM INPUTS
   ======================================================================== */

.vhp-input {
    display: block;
    width: 100%;
    height: 40px;
    padding: var(--vhp-space-2) var(--vhp-space-3);
    font-family: var(--vhp-font-family);
    font-size: var(--vhp-font-base);
    font-weight: var(--vhp-weight-normal);
    line-height: var(--vhp-leading-normal);
    color: var(--vhp-color-text);
    background-color: var(--vhp-white);
    border: 1px solid var(--vhp-color-border);
    border-radius: var(--vhp-radius-sm);
    transition:
        border-color var(--vhp-duration-fast) var(--vhp-ease-default),
        box-shadow var(--vhp-duration-fast) var(--vhp-ease-default);
    appearance: none;
    -webkit-appearance: none;
}

.vhp-input::placeholder {
    color: var(--vhp-color-text-muted);
}

.vhp-input:focus {
    outline: none;
    border-color: var(--vhp-color-primary);
    box-shadow: 0 0 0 var(--vhp-ring-width) var(--vhp-ring-color);
}

.vhp-input:disabled {
    background-color: var(--vhp-color-surface);
    color: var(--vhp-color-text-muted);
    cursor: not-allowed;
}

/* Error State */
.vhp-input--error {
    border-color: var(--vhp-color-danger);
    background-color: var(--vhp-red-50);
}

.vhp-input--error:focus {
    border-color: var(--vhp-color-danger);
    box-shadow: 0 0 0 var(--vhp-ring-width) rgba(204, 0, 0, 0.25);
}

/* Success State */
.vhp-input--success {
    border-color: var(--vhp-color-success);
}

.vhp-input--success:focus {
    border-color: var(--vhp-color-success);
    box-shadow: 0 0 0 var(--vhp-ring-width) rgba(0, 128, 9, 0.25);
}

/* Textarea */
textarea.vhp-input {
    height: auto;
    min-height: 80px;
    resize: vertical;
}

/* Select */
select.vhp-input {
    padding-right: var(--vhp-space-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b6b6b' d='M6 8.825a.5.5 0 0 1-.354-.146l-4-4a.5.5 0 0 1 .708-.708L6 7.617l3.646-3.646a.5.5 0 0 1 .708.708l-4 4A.5.5 0 0 1 6 8.825z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--vhp-space-3) center;
    background-size: 12px;
}


/* ---- Label ---- */

.vhp-label {
    display: block;
    margin-bottom: var(--vhp-space-1);
    font-family: var(--vhp-font-family);
    font-size: var(--vhp-font-sm);
    font-weight: var(--vhp-weight-semibold);
    color: var(--vhp-color-text-secondary);
    line-height: var(--vhp-leading-normal);
}

.vhp-label--required::after {
    content: ' *';
    color: var(--vhp-color-danger);
}

/* ---- Field Error Message ---- */

.vhp-field-error {
    display: none;
    margin-top: var(--vhp-space-1);
    font-size: var(--vhp-font-xs);
    color: var(--vhp-color-danger);
    line-height: var(--vhp-leading-normal);
}

.vhp-field-error.is-visible {
    display: block;
}

/* ---- Form Group ---- */

.vhp-form-group {
    margin-bottom: var(--vhp-space-4);
}


/* ========================================================================
   CARDS
   ======================================================================== */

.vhp-card {
    background-color: var(--vhp-white);
    border: 1px solid var(--vhp-surface-card-border-soft);
    border-radius: var(--vhp-surface-card-radius-md);
    box-shadow: var(--vhp-surface-card-shadow-default);
    overflow: hidden;
}

.vhp-card--flat {
    box-shadow: none;
}

.vhp-card--elevated {
    border: none;
    box-shadow: var(--vhp-surface-card-shadow-prominent);
}

.vhp-card--interactive {
    cursor: pointer;
    transition:
        box-shadow var(--vhp-duration-normal) var(--vhp-ease-default),
        transform var(--vhp-duration-normal) var(--vhp-ease-default);
}

.vhp-card--interactive:hover {
    box-shadow: var(--vhp-shadow-md);
    transform: translateY(-1px);
}

.vhp-card__header {
    padding: var(--vhp-space-4);
    border-bottom: 1px solid var(--vhp-surface-card-border-soft);
}

.vhp-card__body {
    padding: var(--vhp-space-4);
}

.vhp-card__footer {
    padding: var(--vhp-space-4);
    border-top: 1px solid var(--vhp-surface-card-border-soft);
    background-color: var(--vhp-color-surface-light);
}

/* Compact variant */
.vhp-card--compact .vhp-card__header,
.vhp-card--compact .vhp-card__body,
.vhp-card--compact .vhp-card__footer {
    padding: var(--vhp-space-3);
}


/* ========================================================================
   ALERTS
   ======================================================================== */

.vhp-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--vhp-space-3);
    padding: var(--vhp-space-3) var(--vhp-space-4);
    font-family: var(--vhp-font-family);
    font-size: var(--vhp-font-sm);
    line-height: var(--vhp-leading-normal);
    border-radius: var(--vhp-radius-sm);
    border-left: 4px solid transparent;
}

.vhp-alert__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.vhp-alert__content {
    flex: 1;
    min-width: 0;
}

.vhp-alert__title {
    font-weight: var(--vhp-weight-semibold);
    margin-bottom: var(--vhp-space-1);
}

/* Info */
.vhp-alert--info {
    background-color: var(--vhp-blue-50);
    border-left-color: var(--vhp-color-primary);
    color: var(--vhp-blue-900);
}

/* Success */
.vhp-alert--success {
    background-color: var(--vhp-green-50);
    border-left-color: var(--vhp-color-success);
    color: #1b5e20;
}

/* Warning */
.vhp-alert--warning {
    background-color: var(--vhp-orange-50);
    border-left-color: var(--vhp-color-warning);
    color: #e65100;
}

/* Error / Danger */
.vhp-alert--error {
    background-color: var(--vhp-red-50);
    border-left-color: var(--vhp-color-danger);
    color: #b71c1c;
}

/* Dismissible */
.vhp-alert--dismissible {
    padding-right: var(--vhp-space-10);
    position: relative;
}

.vhp-alert__close {
    position: absolute;
    top: var(--vhp-space-2);
    right: var(--vhp-space-2);
    background: none;
    border: none;
    font-size: var(--vhp-font-lg);
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    padding: var(--vhp-space-1);
    line-height: 1;
}

.vhp-alert__close:hover {
    opacity: 1;
}


/* ========================================================================
   BOOKING ENGINE COMPONENT CONTRACTS
   ======================================================================== */

.vhp-booking-summary-card,
#new_content .card.vhp-booking-summary-card,
.my-booking-card.vhp-booking-summary-card {
    --vhp-booking-card-radius: var(--vhp-surface-card-radius-md);
    --vhp-booking-card-padding: var(--vhp-surface-card-padding-md);
    --vhp-booking-card-border: var(--vhp-surface-card-border-soft);
    --vhp-booking-card-shadow: var(--vhp-surface-card-shadow-default);
    background-color: var(--vhp-white);
    border: 1px solid var(--vhp-booking-card-border);
    border-radius: var(--vhp-booking-card-radius);
    box-shadow: var(--vhp-booking-card-shadow);
    padding: var(--vhp-booking-card-padding);
}

.vhp-search-card,
.header-rmsearch-wrapper.vhp-search-card,
.my-booking-search-card.vhp-search-card {
    --vhp-search-card-radius: var(--vhp-surface-card-radius-lg);
    --vhp-search-card-border: var(--vhp-surface-card-border-soft);
    --vhp-search-card-shadow: var(--vhp-surface-card-shadow-default);
    --vhp-search-card-padding-block: var(--vhp-space-4-5);
    --vhp-search-card-padding-inline: var(--vhp-layout-search-block-padding);
    background-color: var(--vhp-white);
    border: 1px solid var(--vhp-search-card-border);
    border-radius: var(--vhp-search-card-radius);
    box-shadow: var(--vhp-search-card-shadow);
    padding: var(--vhp-search-card-padding-block) var(--vhp-search-card-padding-inline);
}

.vhp-search-card .vhp-input,
.vhp-search-card .vhp-search-card__field,
.my-booking-search-card.vhp-search-card .form-control.vhp-search-card__field {
    min-height: 44px;
    border-color: var(--vhp-color-border-form-strong);
    border-radius: var(--vhp-surface-control-radius);
    box-shadow: none;
}

.vhp-search-card__copy,
.my-booking-search-card.vhp-search-card .vhp-search-card__copy {
    font-size: var(--vhp-type-body-size);
    line-height: 1.35;
}

.vhp-search-card__action,
.search_room_submit.vhp-search-card__action {
    border-radius: var(--vhp-surface-control-radius);
    font-size: var(--vhp-type-action-size);
}

.vhp-status-alert,
.my-booking-status-alert.vhp-status-alert {
    --vhp-status-alert-gap: var(--vhp-space-3-5);
    --vhp-status-alert-padding-block: var(--vhp-space-4-5);
    --vhp-status-alert-padding-inline: var(--vhp-space-5);
    display: flex;
    gap: var(--vhp-status-alert-gap);
    border: 1px solid var(--vhp-surface-card-border-strong);
    border-radius: var(--vhp-surface-card-radius-md);
    padding: var(--vhp-status-alert-padding-block) var(--vhp-status-alert-padding-inline);
    box-shadow: var(--vhp-surface-card-shadow-default);
}

.vhp-status-alert .status-badge,
.my-booking-status-alert.vhp-status-alert .status-badge {
    font-size: var(--vhp-type-status-badge-size);
    line-height: var(--vhp-type-status-badge-leading);
}

.vhp-status-alert__content,
.vhp-status-alert .status-content {
    display: flex;
    flex-direction: column;
    gap: var(--vhp-space-1);
}

.vhp-status-alert__message,
.vhp-status-alert .status-message {
    font-size: var(--vhp-type-body-size);
    line-height: var(--vhp-type-body-leading);
}

.vhp-status-alert__reference,
.vhp-status-alert .status-reference {
    font-size: var(--vhp-type-helper-size);
    line-height: 1.45;
}

.vhp-empty-state,
.my-booking-placeholder.vhp-empty-state {
    border: 1px solid var(--vhp-surface-card-border-strong);
    border-radius: var(--vhp-surface-card-radius-lg);
    box-shadow: var(--vhp-surface-card-shadow-default);
    background-color: var(--vhp-color-background);
}

.vhp-empty-state__title,
.my-booking-placeholder.vhp-empty-state .vhp-empty-state__title {
    font-size: var(--vhp-type-empty-state-title-size);
    line-height: var(--vhp-type-empty-state-title-leading);
}

.vhp-empty-state__body,
.my-booking-placeholder.vhp-empty-state .vhp-empty-state__body {
    font-size: var(--vhp-type-empty-state-body-size);
    line-height: var(--vhp-type-empty-state-body-leading);
}

.vhp-room-card {
    --vhp-room-card-radius: var(--vhp-surface-card-radius-lg);
    --vhp-room-card-border: var(--vhp-surface-card-border-soft);
    --vhp-room-card-shadow: var(--vhp-surface-card-shadow-default);
    background-color: var(--vhp-white);
    border: 1px solid var(--vhp-room-card-border);
    border-radius: var(--vhp-room-card-radius);
    box-shadow: var(--vhp-room-card-shadow);
    overflow: hidden;
}

.vhp-room-card__title,
.rm_heading.vhp-room-card__title {
    font-size: var(--rtp-fs-room-title, var(--vhp-type-room-title-size));
    line-height: var(--vhp-type-room-title-leading);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.vhp-room-card__body,
.rm_desc.vhp-room-card__body {
    font-size: var(--rtp-fs-room-copy, var(--vhp-type-room-body-size));
    line-height: var(--vhp-type-room-body-leading);
}

.vhp-room-card__header {
    display: flex;
    align-items: stretch;
    gap: var(--vhp-space-5);
}

.vhp-room-card__media {
    flex: 0 0 var(--vhp-layout-room-card-media-width);
    min-width: 0;
    display: flex;
}

.vhp-room-card__media .room-type-slider,
.vhp-room-card__media .room-type-slider-link,
.vhp-room-card__media .room-type-slider-track,
.vhp-room-card__media .room-type-slide {
    width: 100%;
    height: 100%;
}

.vhp-room-card__media .room-type-slider-track {
    min-height: 176px;
}

.vhp-room-card__media .room-type-image,
.vhp-room-card__header .room-type-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vhp-room-card__content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.vhp-room-card__pricing {
    flex: 0 0 var(--vhp-layout-room-card-price-width);
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    text-align: right;
}

.vhp-room-card__link,
.more_info_link.vhp-room-card__link {
    font-size: var(--vhp-type-room-body-size);
    line-height: var(--vhp-type-room-body-leading);
}

.vhp-room-card__price-label,
.price_start_text.vhp-room-card__price-label,
.period_price_text.vhp-room-card__price-label {
    font-size: var(--vhp-type-price-label-size);
    line-height: var(--vhp-type-price-label-leading);
}

.vhp-room-card__price-value,
.price_value_text.vhp-room-card__price-value {
    font-size: var(--rtp-fs-room-price, var(--vhp-type-room-price-size-lg));
    line-height: var(--vhp-type-room-price-leading);
}

.vhp-rate-plan-card {
    --vhp-rate-plan-card-radius: var(--vhp-surface-card-radius-md);
    --vhp-rate-plan-card-border: var(--vhp-surface-card-border-soft);
    background-color: var(--vhp-white);
    border: 1px solid var(--vhp-rate-plan-card-border);
    border-radius: var(--vhp-rate-plan-card-radius);
}

.vhp-rate-plan-card__info {
    min-width: 0;
}

.vhp-rate-plan-card__pricing {
    text-align: center;
}

.vhp-rate-plan-card__actions {
    width: 100%;
}

.vhp-rate-plan-card__title,
.rate_plan_name.vhp-rate-plan-card__title {
    font-size: var(--rtp-fs-rate-title, var(--vhp-type-rate-title-size));
    line-height: var(--vhp-type-rate-title-leading);
}

.vhp-rate-plan-card__body,
.rate_plan_desc.vhp-rate-plan-card__body,
.rate-plan-surcharge-desc.vhp-rate-plan-card__body,
.price_note.vhp-rate-plan-card__body,
.pricing-room-breakdown-empty.vhp-rate-plan-card__body,
.pricing-room-breakdown-occupancy.vhp-rate-plan-card__body,
.occupancy_pricing_conditions_container .pricing-conditions-toggle.vhp-rate-plan-card__body,
.rt_total_hint.vhp-rate-plan-card__body {
    font-size: var(--rtp-fs-rate-copy, var(--vhp-type-rate-copy-size));
    line-height: var(--vhp-type-rate-copy-leading);
}

.vhp-rate-plan-card__price-label,
.price_label.vhp-rate-plan-card__price-label,
.rt_total_label.vhp-rate-plan-card__price-label {
    font-size: var(--rtp-fs-price-label, var(--vhp-type-price-label-size));
    font-weight: var(--vhp-type-price-label-weight);
    line-height: var(--vhp-type-price-label-leading);
}

.vhp-rate-plan-card__price-value,
.price_value.vhp-rate-plan-card__price-value {
    font-size: var(--rtp-fs-rate-price, var(--vhp-type-rate-price-size));
    line-height: var(--vhp-type-rate-price-leading);
}

.vhp-rate-plan-card__total-value,
.rt_total_value.vhp-rate-plan-card__total-value,
.pricing-room-breakdown-total.vhp-rate-plan-card__total-value {
    font-size: var(--rtp-fs-total-value, var(--vhp-type-summary-value-size));
    line-height: var(--vhp-type-summary-value-leading);
}

.vhp-rate-plan-card__panel,
.pricing-conditions-panel.vhp-rate-plan-card__panel,
.pricing-room-breakdown-item.vhp-rate-plan-card__panel {
    border: 1px solid var(--vhp-surface-card-border-soft);
    border-radius: var(--vhp-surface-control-radius);
}

.vhp-gallery-card,
.demo-bkg-media.vhp-gallery-card,
.demo-bkg-slider.vhp-gallery-card,
.mobile-grid-hero.vhp-gallery-card,
.mobile-grid-meta.vhp-gallery-card,
#google-reviews-card.vhp-gallery-card {
    background-color: var(--vhp-white);
    /* border-radius: var(--vhp-surface-card-radius-md); */
}

.vhp-gallery-card--elevated,
.demo-bkg-media.vhp-gallery-card--elevated,
#google-reviews-card.vhp-gallery-card--elevated {
    box-shadow: var(--vhp-surface-card-shadow-default);
}

.vhp-recommended-package-card,
.recommended-rooms-skeleton__card.vhp-recommended-package-card,
.rec-option-item.vhp-recommended-package-card,
.rec-group-total-card.vhp-recommended-package-card,
.recommended-rooms-lazy-state--error.vhp-recommended-package-card {
    background-color: var(--vhp-white);
    border: 1px solid var(--vhp-surface-card-border-soft);
    border-radius: var(--vhp-surface-card-radius-lg);
    box-shadow: var(--vhp-surface-card-shadow-default);
}

@media (max-width: 767px) {
    .vhp-room-card__header {
        flex-direction: column;
        gap: 0;
    }

    .vhp-room-card__media,
    .vhp-room-card__pricing {
        flex-basis: auto;
        width: 100%;
    }

    .vhp-room-card__pricing {
        align-items: flex-start;
        text-align: left;
    }
}


/* ========================================================================
   BADGES
   ======================================================================== */

.vhp-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--vhp-space-1);
    padding: var(--vhp-space-0-5) var(--vhp-space-2);
    font-family: var(--vhp-font-family);
    font-size: var(--vhp-font-xs);
    font-weight: var(--vhp-weight-semibold);
    line-height: var(--vhp-leading-tight);
    border-radius: var(--vhp-radius-sm);
    white-space: nowrap;
}

/* Variants */
.vhp-badge--primary {
    background-color: var(--vhp-blue-50);
    color: var(--vhp-color-primary);
}

.vhp-badge--success {
    background-color: var(--vhp-green-50);
    color: var(--vhp-color-success);
}

.vhp-badge--warning {
    background-color: var(--vhp-orange-50);
    color: var(--vhp-orange-700);
}

.vhp-badge--danger,
.vhp-badge--urgency {
    background-color: var(--vhp-red-50);
    color: var(--vhp-color-danger);
}

.vhp-badge--info {
    background-color: var(--vhp-blue-50);
    color: var(--vhp-blue-700);
}

.vhp-badge--neutral {
    background-color: var(--vhp-gray-100);
    color: var(--vhp-gray-700);
}

/* Solid variants (higher emphasis) */
.vhp-badge--primary-solid {
    background-color: var(--vhp-color-primary);
    color: var(--vhp-white);
}

.vhp-badge--success-solid {
    background-color: var(--vhp-color-success);
    color: var(--vhp-white);
}

.vhp-badge--danger-solid {
    background-color: var(--vhp-color-danger);
    color: var(--vhp-white);
}

/* Deal / Inclusion badge (Booking.com style green) */
.vhp-badge--deal {
    background-color: var(--vhp-green-50);
    color: var(--vhp-color-success);
    border: 1px solid var(--vhp-green-100);
}

/* Pill (fully rounded) */
.vhp-badge--pill {
    border-radius: var(--vhp-radius-full);
    padding: var(--vhp-space-0-5) var(--vhp-space-3);
}

/* Count badge (circle) */
.vhp-badge--count {
    min-width: 20px;
    height: 20px;
    padding: 0 var(--vhp-space-1);
    border-radius: var(--vhp-radius-full);
    justify-content: center;
    font-size: var(--vhp-font-2xs);
}


/* ========================================================================
   LOADING / OVERLAY
   ======================================================================== */

/* Full-page overlay */
.vhp-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--vhp-z-overlay);
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--vhp-duration-moderate) var(--vhp-ease-default),
        visibility var(--vhp-duration-moderate) var(--vhp-ease-default);
}

.vhp-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.vhp-overlay__content {
    background: var(--vhp-white);
    border-radius: var(--vhp-radius-lg);
    padding: var(--vhp-space-10) var(--vhp-space-12);
    text-align: center;
    box-shadow: var(--vhp-shadow-overlay);
    max-width: 380px;
    width: 90%;
    animation: vhp-fadeSlideUp var(--vhp-duration-moderate) var(--vhp-ease-out);
}

/* Spinner */
.vhp-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--vhp-color-border-light);
    border-top-color: var(--vhp-color-primary);
    border-radius: 50%;
    animation: vhp-spin 0.7s linear infinite;
}

.vhp-spinner--sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.vhp-spinner--lg {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

.vhp-spinner--xl {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

.vhp-spinner--white {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: var(--vhp-white);
}

/* Skeleton loading */
.vhp-skeleton {
    background: linear-gradient(90deg,
        var(--vhp-gray-100) 25%,
        var(--vhp-gray-200) 37%,
        var(--vhp-gray-100) 63%);
    background-size: 400% 100%;
    animation: vhp-shimmer 1.4s ease infinite;
    border-radius: var(--vhp-radius-sm);
}

.vhp-skeleton--text {
    height: 14px;
    margin-bottom: var(--vhp-space-2);
    width: 100%;
}

.vhp-skeleton--text:last-child {
    width: 60%;
}

.vhp-skeleton--circle {
    border-radius: 50%;
}

.vhp-skeleton--rect {
    border-radius: var(--vhp-radius-sm);
}


/* ========================================================================
   MODAL (base)
   ======================================================================== */

.vhp-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--vhp-z-modal);
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--vhp-duration-normal) var(--vhp-ease-default),
        visibility var(--vhp-duration-normal) var(--vhp-ease-default);
}

.vhp-modal-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

.vhp-modal {
    background: var(--vhp-white);
    border-radius: var(--vhp-radius-lg);
    box-shadow: var(--vhp-shadow-xl);
    max-width: 600px;
    width: calc(100% - var(--vhp-space-8));
    max-height: calc(100vh - var(--vhp-space-8));
    overflow-y: auto;
    transform: translateY(20px);
    transition: transform var(--vhp-duration-moderate) var(--vhp-ease-out);
}

.vhp-modal-backdrop.is-visible .vhp-modal {
    transform: translateY(0);
}

.vhp-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--vhp-space-4) var(--vhp-space-5);
    border-bottom: 1px solid var(--vhp-color-border-light);
}

.vhp-modal__title {
    font-size: var(--vhp-font-lg);
    font-weight: var(--vhp-weight-bold);
    color: var(--vhp-color-text);
    margin: 0;
}

.vhp-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: var(--vhp-radius-sm);
    color: var(--vhp-color-text-muted);
    cursor: pointer;
    font-size: var(--vhp-font-xl);
    transition: background-color var(--vhp-duration-fast) var(--vhp-ease-default);
}

.vhp-modal__close:hover {
    background-color: var(--vhp-color-surface);
}

.vhp-modal__body {
    padding: var(--vhp-space-5);
}

.vhp-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--vhp-space-3);
    padding: var(--vhp-space-4) var(--vhp-space-5);
    border-top: 1px solid var(--vhp-color-border-light);
}


/* ========================================================================
   TOOLTIP / POPOVER
   ======================================================================== */

.vhp-tooltip {
    position: absolute;
    z-index: var(--vhp-z-dropdown);
    padding: var(--vhp-space-2) var(--vhp-space-3);
    font-family: var(--vhp-font-family);
    font-size: var(--vhp-font-xs);
    font-weight: var(--vhp-weight-normal);
    color: var(--vhp-white);
    background-color: var(--vhp-gray-800);
    border-radius: var(--vhp-radius-sm);
    box-shadow: var(--vhp-shadow-md);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--vhp-duration-fast) var(--vhp-ease-default);
}

.vhp-tooltip.is-visible {
    opacity: 1;
}


/* ========================================================================
   DIVIDERS
   ======================================================================== */

.vhp-divider {
    border: none;
    border-top: 1px solid var(--vhp-color-border-light);
    margin: var(--vhp-space-4) 0;
}

.vhp-divider--thick {
    border-top-width: 2px;
}

.vhp-divider--spacing-sm {
    margin: var(--vhp-space-2) 0;
}

.vhp-divider--spacing-lg {
    margin: var(--vhp-space-8) 0;
}


/* ========================================================================
   TEXT UTILITIES
   ======================================================================== */

.vhp-text-primary   { color: var(--vhp-color-primary) !important; }
.vhp-text-success   { color: var(--vhp-color-success) !important; }
.vhp-text-danger    { color: var(--vhp-color-danger) !important; }
.vhp-text-warning   { color: var(--vhp-color-warning) !important; }
.vhp-text-muted     { color: var(--vhp-color-text-muted) !important; }
.vhp-text-secondary { color: var(--vhp-color-text-secondary) !important; }

.vhp-text-xs   { font-size: var(--vhp-font-xs) !important; }
.vhp-text-sm   { font-size: var(--vhp-font-sm) !important; }
.vhp-text-base { font-size: var(--vhp-font-base) !important; }
.vhp-text-md   { font-size: var(--vhp-font-md) !important; }
.vhp-text-lg   { font-size: var(--vhp-font-lg) !important; }
.vhp-text-xl   { font-size: var(--vhp-font-xl) !important; }
.vhp-text-2xl  { font-size: var(--vhp-font-2xl) !important; }

.vhp-font-light    { font-weight: var(--vhp-weight-light) !important; }
.vhp-font-normal   { font-weight: var(--vhp-weight-normal) !important; }
.vhp-font-medium   { font-weight: var(--vhp-weight-medium) !important; }
.vhp-font-semibold { font-weight: var(--vhp-weight-semibold) !important; }
.vhp-font-bold     { font-weight: var(--vhp-weight-bold) !important; }

.vhp-text-center { text-align: center !important; }
.vhp-text-left   { text-align: left !important; }
.vhp-text-right  { text-align: right !important; }

.vhp-leading-none    { line-height: var(--vhp-leading-none) !important; }
.vhp-leading-tight   { line-height: var(--vhp-leading-tight) !important; }
.vhp-leading-snug    { line-height: var(--vhp-leading-snug) !important; }
.vhp-leading-normal  { line-height: var(--vhp-leading-normal) !important; }
.vhp-leading-relaxed { line-height: var(--vhp-leading-relaxed) !important; }
.vhp-leading-loose   { line-height: var(--vhp-leading-loose) !important; }

/* Semantic typography roles */
.vhp-type-overline,
.vhp-type-caption,
.vhp-type-meta,
.vhp-type-body,
.vhp-type-body-strong,
.vhp-type-action,
.vhp-type-card-title,
.vhp-type-section-title,
.vhp-type-page-title,
.vhp-type-price-md,
.vhp-type-price-lg,
.vhp-type-price-xl {
    font-family: var(--vhp-font-family);
    letter-spacing: 0;
    color: var(--vhp-color-text);
    margin: 0;
}

.vhp-type-overline {
    font-size: var(--vhp-type-overline-size);
    font-weight: var(--vhp-type-overline-weight);
    line-height: var(--vhp-type-overline-leading);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vhp-color-text-muted);
}

.vhp-type-caption {
    font-size: var(--vhp-type-caption-size);
    font-weight: var(--vhp-type-caption-weight);
    line-height: var(--vhp-type-caption-leading);
    color: var(--vhp-color-text-muted);
}

.vhp-type-meta {
    font-size: var(--vhp-type-meta-size);
    font-weight: var(--vhp-type-meta-weight);
    line-height: var(--vhp-type-meta-leading);
    color: var(--vhp-color-text-secondary);
}

.vhp-type-body {
    font-size: var(--vhp-type-body-size);
    font-weight: var(--vhp-type-body-weight);
    line-height: var(--vhp-type-body-leading);
}

.vhp-type-body-strong {
    font-size: var(--vhp-type-body-strong-size);
    font-weight: var(--vhp-type-body-strong-weight);
    line-height: var(--vhp-type-body-strong-leading);
}

.vhp-type-action {
    font-size: var(--vhp-type-action-size);
    font-weight: var(--vhp-type-action-weight);
    line-height: var(--vhp-type-action-leading);
}

.vhp-type-card-title {
    font-size: var(--vhp-type-card-title-size);
    font-weight: var(--vhp-type-card-title-weight);
    line-height: var(--vhp-type-card-title-leading);
}

.vhp-type-section-title {
    font-size: var(--vhp-type-section-title-size);
    font-weight: var(--vhp-type-section-title-weight);
    line-height: var(--vhp-type-section-title-leading);
}

.vhp-type-page-title {
    font-size: var(--vhp-type-page-title-size);
    font-weight: var(--vhp-type-page-title-weight);
    line-height: var(--vhp-type-page-title-leading);
}

.vhp-type-price-md,
.vhp-type-price-lg,
.vhp-type-price-xl {
    font-variant-numeric: tabular-nums;
    color: var(--vhp-color-text);
    white-space: nowrap;
}

.vhp-type-price-md {
    font-size: var(--vhp-type-price-md-size);
    font-weight: var(--vhp-type-price-md-weight);
    line-height: var(--vhp-type-price-md-leading);
}

.vhp-type-price-lg {
    font-size: var(--vhp-type-price-lg-size);
    font-weight: var(--vhp-type-price-lg-weight);
    line-height: var(--vhp-type-price-lg-leading);
}

.vhp-type-price-xl {
    font-size: var(--vhp-type-price-xl-size);
    font-weight: var(--vhp-type-price-xl-weight);
    line-height: var(--vhp-type-price-xl-leading);
}

.vhp-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vhp-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vhp-line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ========================================================================
   SPACING UTILITIES
   ======================================================================== */

.vhp-mt-0  { margin-top: 0 !important; }
.vhp-mt-1  { margin-top: var(--vhp-space-1) !important; }
.vhp-mt-2  { margin-top: var(--vhp-space-2) !important; }
.vhp-mt-3  { margin-top: var(--vhp-space-3) !important; }
.vhp-mt-4  { margin-top: var(--vhp-space-4) !important; }
.vhp-mt-5  { margin-top: var(--vhp-space-5) !important; }
.vhp-mt-6  { margin-top: var(--vhp-space-6) !important; }
.vhp-mt-8  { margin-top: var(--vhp-space-8) !important; }

.vhp-mb-0  { margin-bottom: 0 !important; }
.vhp-mb-1  { margin-bottom: var(--vhp-space-1) !important; }
.vhp-mb-2  { margin-bottom: var(--vhp-space-2) !important; }
.vhp-mb-3  { margin-bottom: var(--vhp-space-3) !important; }
.vhp-mb-4  { margin-bottom: var(--vhp-space-4) !important; }
.vhp-mb-5  { margin-bottom: var(--vhp-space-5) !important; }
.vhp-mb-6  { margin-bottom: var(--vhp-space-6) !important; }
.vhp-mb-8  { margin-bottom: var(--vhp-space-8) !important; }

.vhp-ml-0  { margin-left: 0 !important; }
.vhp-ml-2  { margin-left: var(--vhp-space-2) !important; }
.vhp-ml-3  { margin-left: var(--vhp-space-3) !important; }
.vhp-ml-4  { margin-left: var(--vhp-space-4) !important; }

.vhp-mr-0  { margin-right: 0 !important; }
.vhp-mr-2  { margin-right: var(--vhp-space-2) !important; }
.vhp-mr-3  { margin-right: var(--vhp-space-3) !important; }
.vhp-mr-4  { margin-right: var(--vhp-space-4) !important; }

.vhp-p-0   { padding: 0 !important; }
.vhp-p-2   { padding: var(--vhp-space-2) !important; }
.vhp-p-3   { padding: var(--vhp-space-3) !important; }
.vhp-p-4   { padding: var(--vhp-space-4) !important; }
.vhp-p-5   { padding: var(--vhp-space-5) !important; }
.vhp-p-6   { padding: var(--vhp-space-6) !important; }

.vhp-px-0  { padding-left: 0 !important; padding-right: 0 !important; }
.vhp-px-3  { padding-left: var(--vhp-space-3) !important; padding-right: var(--vhp-space-3) !important; }
.vhp-px-4  { padding-left: var(--vhp-space-4) !important; padding-right: var(--vhp-space-4) !important; }
.vhp-px-5  { padding-left: var(--vhp-space-5) !important; padding-right: var(--vhp-space-5) !important; }

.vhp-py-0  { padding-top: 0 !important; padding-bottom: 0 !important; }
.vhp-py-2  { padding-top: var(--vhp-space-2) !important; padding-bottom: var(--vhp-space-2) !important; }
.vhp-py-3  { padding-top: var(--vhp-space-3) !important; padding-bottom: var(--vhp-space-3) !important; }
.vhp-py-4  { padding-top: var(--vhp-space-4) !important; padding-bottom: var(--vhp-space-4) !important; }


/* ========================================================================
   DISPLAY / LAYOUT UTILITIES
   ======================================================================== */

.vhp-d-none          { display: none !important; }
.vhp-d-block         { display: block !important; }
.vhp-d-flex          { display: flex !important; }
.vhp-d-inline-flex   { display: inline-flex !important; }
.vhp-d-grid          { display: grid !important; }

.vhp-flex-col        { flex-direction: column !important; }
.vhp-flex-row        { flex-direction: row !important; }
.vhp-flex-wrap       { flex-wrap: wrap !important; }
.vhp-flex-1          { flex: 1 1 0% !important; }
.vhp-flex-shrink-0   { flex-shrink: 0 !important; }

.vhp-items-center    { align-items: center !important; }
.vhp-items-start     { align-items: flex-start !important; }
.vhp-items-end       { align-items: flex-end !important; }
.vhp-items-stretch   { align-items: stretch !important; }

.vhp-justify-center  { justify-content: center !important; }
.vhp-justify-between { justify-content: space-between !important; }
.vhp-justify-end     { justify-content: flex-end !important; }
.vhp-justify-start   { justify-content: flex-start !important; }

.vhp-gap-1  { gap: var(--vhp-space-1) !important; }
.vhp-gap-2  { gap: var(--vhp-space-2) !important; }
.vhp-gap-3  { gap: var(--vhp-space-3) !important; }
.vhp-gap-4  { gap: var(--vhp-space-4) !important; }
.vhp-gap-5  { gap: var(--vhp-space-5) !important; }
.vhp-gap-6  { gap: var(--vhp-space-6) !important; }

.vhp-w-full { width: 100% !important; }


/* ========================================================================
   RESPONSIVE VISIBILITY UTILITIES
   ======================================================================== */

/* Hide on mobile (below 768px) */
@media (max-width: 767px) {
    .vhp-hide-mobile { display: none !important; }
}

/* Hide on tablet+ (768px and above) */
@media (min-width: 768px) {
    .vhp-hide-desktop { display: none !important; }
}

/* Show only on mobile */
@media (min-width: 768px) {
    .vhp-show-mobile { display: none !important; }
}

/* Mobile bottom-docked overlay */
@media (max-width: 767px) {
    .vhp-overlay--bottom-dock {
        align-items: flex-end;
    }

    .vhp-overlay--bottom-dock .vhp-overlay__content {
        border-radius: var(--vhp-radius-xl) var(--vhp-radius-xl) 0 0;
        max-width: 100%;
        width: 100%;
        padding: var(--vhp-space-8) var(--vhp-space-5);
        animation: vhp-slideUp var(--vhp-duration-moderate) var(--vhp-ease-out);
    }
}


/* ========================================================================
   ACCESSIBILITY
   ======================================================================== */

/* Screen reader only */
.vhp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip navigation link */
.vhp-skip-link {
    position: absolute;
    top: -100%;
    left: var(--vhp-space-4);
    z-index: var(--vhp-z-max);
    padding: var(--vhp-space-2) var(--vhp-space-4);
    background: var(--vhp-color-primary);
    color: var(--vhp-white);
    border-radius: var(--vhp-radius-sm);
    font-weight: var(--vhp-weight-semibold);
    text-decoration: none;
}

.vhp-skip-link:focus {
    top: var(--vhp-space-2);
}

/* Live region for announcements */
.vhp-live-region {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ========================================================================
   KEYFRAME ANIMATIONS
   ======================================================================== */

@keyframes vhp-spin {
    to { transform: rotate(360deg); }
}

@keyframes vhp-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@keyframes vhp-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes vhp-fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes vhp-slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes vhp-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}