/*
 * Haadoo Booking Calendar  –  haadoo-booking.css
 *
 * Design reference: booking calendar UI with Thai locale.
 * Color scheme:
 *   Green  #24BB3B → ว่าง (available)
 *   Red    #FF3B30 → เต็ม (unavailable)
 *   Amber  #E8BA00 → รอโอนเงิน (pending payment)
 *   Orange #EC5926 → selected / primary
 */

/* ── CSS variables (easy theming) ────────────────────────────── */
.haadoo-booking-widget {
     --hdc-primary:       #EC5926;   /* selected circle & range strip  */
     --hdc-primary-light: #FDEEE9;   /* range stripe background        */
    --hdc-bg:            #ffffff;
     --hdc-header-bg:     #ffffff;
     --hdc-header-text:   #1A1E22;
    --hdc-radius-lg:     20px;
    --hdc-radius-sm:     10px;
    --hdc-shadow:        0 2px 16px rgba(0, 0, 0, 0.10);
    --hdc-font:          'Sarabun', 'Noto Sans Thai', 'Prompt', sans-serif;
    --hdc-gap:           14px;

    font-family:  var(--hdc-font);
    max-width:    420px;
    margin:       0 auto;
    box-sizing:   border-box;
}

.haadoo-booking-widget *,
.haadoo-booking-widget *::before,
.haadoo-booking-widget *::after {
    box-sizing: inherit;
}

/* ── Wrapper ──────────────────────────────────────────────────── */
.hdc-wrapper {
    display:        flex;
    flex-direction: column;
    gap:            var(--hdc-gap);
}

/* ── Main card ────────────────────────────────────────────────── */
.hdc-card {
    background:    var(--hdc-bg);
    border-radius: var(--hdc-radius-lg);
    box-shadow:    var(--hdc-shadow);
    overflow:      hidden;
}

/* ── Month header ─────────────────────────────────────────────── */
.hdc-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    background:      var(--hdc-header-bg);
    padding:         14px 12px;
}

.hdc-month-label {
    color:       var(--hdc-primary);
    font-size:   18px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.hdc-nav-btn {
    background:    none;
    border:        none;
    color:         #98A2B3;
    font-size:     28px;
    line-height:   1;
    padding:       2px 10px;
    cursor:        pointer;
    border-radius: 6px;
    transition:    background 0.15s;
}

.hdc-nav-btn:hover {
    background: #FFFFFF;
    color:      #98A2B3;
}

.hdc-nav-btn:disabled {
    color:  #868E96;
    cursor: default;
}

/* ── Day-of-week header row ───────────────────────────────────── */
.hdc-day-headers {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    padding:               12px 8px 6px;
    border-bottom:         1px solid #DEE2E6;
}

.hdc-day-header {
    text-align:  center;
    color:       #1A1E22;
    font-size:   13px;
    font-weight: 500;
    padding:     4px 0;
}

/* ── Calendar grid ────────────────────────────────────────────── */
.hdc-grid {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    padding:               8px 8px 12px;
    row-gap:               4px;
}

/* ── Individual day cell ──────────────────────────────────────── */
.hdc-day {
    display:         flex;
    justify-content: center;
    align-items:     center;
    cursor:          pointer;
    position:        relative;
    padding:         2px 0;
}

/* Cells that belong to the previous/next month */
.hdc-day--other {
    visibility: hidden;
    cursor:     default;
}

/* Past / beyond-max dates */
.hdc-day--disabled {
    cursor: default;
}

/* ── Range selection backgrounds ──────────────────────────────── */
.hdc-day--in-range {
    background: var(--hdc-primary-light);
}

.hdc-day--range-start {
    background: linear-gradient(
        to right,
        transparent 50%,
        var(--hdc-primary-light) 50%
    );
}

.hdc-day--range-end {
    background: linear-gradient(
        to left,
        transparent 50%,
        var(--hdc-primary-light) 50%
    );
}

/* ── Day circle ───────────────────────────────────────────────── */
.hdc-day-circle {
    width:           40px;
    height:          40px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       14px;
    font-weight:     500;
    position:        relative;
    transition:      transform 0.12s ease;
}

.hdc-day:not(.hdc-day--disabled):not(.hdc-day--other):hover .hdc-day-circle {
    transform: scale(1.12);
}

/* ── Holiday dot (shown below the day number) ─────────────────── */
.hdc-holiday-dot {
    position:   absolute;
    bottom:     3px;
    left:       50%;
    transform:  translateX(-50%);
    width:      5px;
    height:     5px;
    border-radius: 50%;
    background: #3C7BFE;
}

/* ── Loading shimmer ──────────────────────────────────────────── */
.hdc-is-loading .hdc-day--shimmer .hdc-day-circle {
    background: #F3F3F3;
    animation:  hdc-shimmer 1.3s ease-in-out infinite;
}

@keyframes hdc-shimmer {
    0%   { opacity: 1.0; }
    50%  { opacity: 0.45; }
    100% { opacity: 1.0; }
}

/* ── Result / summary card ────────────────────────────────────── */
.hdc-result-card {
    background:    var(--hdc-bg);
    border-radius: var(--hdc-radius-lg);
    box-shadow:    var(--hdc-shadow);
    padding:       18px 20px;
    display:       flex;
    flex-direction: column;
    gap:           14px;
    align-items:   center;
}

.hdc-result-dates {
    display:         flex;
    align-items:     center;
    justify-content: space-around;
    width:           100%;
}

.hdc-result-col {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            4px;
}

.hdc-result-value {
    font-size:   17px;
    font-weight: 600;
    color:       #1A1E22;
}

.hdc-result-label {
    font-size: 12px;
    color:     #98A2B3;
}

.hdc-result-arrow {
    font-size: 22px;
    color:     #19346B;
}

/* ── "จองเลย" button ──────────────────────────────────────────── */
.hdc-book-btn {
    display:       block;
    width:         100%;
    padding:       13px 0;
    background:    var(--hdc-primary);
    color:         #ffffff;
    border:        none;
    border-radius: var(--hdc-radius-sm);
    font-family:   var(--hdc-font);
    font-size:     16px;
    font-weight:   600;
    cursor:        pointer;
    letter-spacing: 0.4px;
    transition:    background 0.18s, transform 0.12s;
}

.hdc-book-btn:hover {
    background: #D75123;
}

.hdc-book-btn:active {
    transform: scale(0.98);
}

/* ── Legend ───────────────────────────────────────────────────── */
.hdc-legend {
    display:         flex;
    justify-content: center;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             16px 24px;
}

.hdc-legend-item {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   15px;
    color:       #1A1E22;
}

.hdc-legend-dot {
    display:       inline-block;
    width:         12px;
    height:        12px;
    border-radius: 50%;
    flex-shrink:   0;
}

/* ── Powered by HaaDoo footer ─────────────────────────────── */
.hdc-powered {
    align-self: flex-start;
    margin-top: -2px;
    padding-left: 4px;
    font-size: 11px;
    line-height: 1.3;
    color: #98A2B3;
}
.hdc-powered a {
    color: #7A8699;
    text-decoration: none;
    font-weight: 400;
    transition: color 0.15s;
}
.hdc-powered a:hover {
    color: #4F5D75;
    text-decoration: underline;
}

/* ── Responsive – small screens ───────────────────────────────── */
@media (max-width: 400px) {
    .haadoo-booking-widget {
        max-width: 100%;
    }

    .hdc-day-circle {
        width:     34px;
        height:    34px;
        font-size: 12px;
    }

    .hdc-month-label {
        font-size: 16px;
    }

    .hdc-legend {
        gap: 10px 16px;
    }

    .hdc-legend-item {
        font-size: 13px;
    }
}

/* ─────────────────────────────────────────────────────────────── */
/*  Booking form panel                                             */
/* ─────────────────────────────────────────────────────────────── */

.hdc-form-panel,
.hdc-success-panel {
    animation: hdc-fade-in 0.2s ease;
}

@keyframes hdc-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hdc-form-card {
    padding: 20px 20px 24px;
}

/* ── Form header (back button + title) ────────────────────────── */
.hdc-form-header {
    display:         flex;
    align-items:     center;
    gap:             12px;
    margin-bottom:   16px;
}

.hdc-back-btn {
    background:    none;
    border:        none;
    color:         #98A2B3;
    font-family:   var(--hdc-font);
    font-size:     14px;
    cursor:        pointer;
    padding:       4px 0;
    transition:    color 0.15s;
    flex-shrink:   0;
}

.hdc-back-btn:hover { color: #1A1E22; }

.hdc-form-title {
    font-size:   17px;
    font-weight: 600;
    color:       #1A1E22;
}

/* ── Date summary bar ─────────────────────────────────────────── */
.hdc-date-bar {
    background:    var(--hdc-primary-light);
    border-radius: var(--hdc-radius-sm);
    padding:       12px 16px;
    margin-bottom: 20px;
}

.hdc-date-bar-placeholder {
    text-align:  center;
    font-size:   14px;
    color:       #98A2B3;
    font-style:  italic;
    padding:     2px 0;
}

.hdc-date-bar-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
}

.hdc-date-bar-col {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            2px;
}

.hdc-date-bar-label {
    font-size: 11px;
    color:     #98A2B3;
}

.hdc-date-bar-value {
    font-size:   14px;
    font-weight: 600;
    color:       var(--hdc-primary);
}

.hdc-date-bar-arrow {
    color:     #98A2B3;
    font-size: 18px;
}

.hdc-date-bar-nights {
    font-size:   13px;
    font-weight: 600;
    color:       var(--hdc-primary);
    background:  #fff;
    border:      1.5px solid var(--hdc-primary);
    border-radius: 20px;
    padding:     2px 10px;
    white-space: nowrap;
}

/* ── Booking form fields ──────────────────────────────────────── */
.hdc-booking-form {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

.hdc-form-group {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.hdc-form-label {
    font-size:   14px;
    font-weight: 500;
    color:       #344054;
    display:     flex;
    align-items: baseline;
    gap:         4px;
    flex-wrap:   wrap;
}

.hdc-required {
    color: var(--hdc-primary);
}

.hdc-label-hint {
    font-size:   12px;
    font-weight: 400;
    color:       #98A2B3;
}

.hdc-form-input {
    width:         100%;
    padding:       11px 14px;
    border:        1.5px solid #D0D5DD;
    border-radius: var(--hdc-radius-sm);
    font-family:   var(--hdc-font);
    font-size:     15px;
    color:         #1A1E22;
    background:    #fff;
    outline:       none;
    transition:    border-color 0.15s, box-shadow 0.15s;
    box-sizing:    border-box;
}

.hdc-form-input::placeholder {
    color: #C0C6CF;
}

.hdc-form-input:focus {
    border-color: var(--hdc-primary);
    box-shadow:   0 0 0 3px rgba(236, 89, 38, 0.12);
}

.hdc-form-input.hdc-input-error {
    border-color: #FF3B30;
}

.hdc-form-textarea {
    resize:     vertical;
    min-height: 80px;
}

.hdc-field-error {
    font-size: 12px;
    color:     #FF3B30;
    min-height: 16px;
}

/* ── API error message ────────────────────────────────────────── */
.hdc-api-error {
    background:    #FFF1F0;
    border:        1px solid #FFCCC7;
    border-radius: var(--hdc-radius-sm);
    color:         #CF1322;
    font-size:     14px;
    padding:       10px 14px;
}

/* ── Submit button ────────────────────────────────────────────── */
.hdc-submit-btn {
    display:       block;
    width:         100%;
    padding:       13px 0;
    background:    var(--hdc-primary);
    color:         #ffffff;
    border:        none;
    border-radius: var(--hdc-radius-sm);
    font-family:   var(--hdc-font);
    font-size:     16px;
    font-weight:   600;
    cursor:        pointer;
    letter-spacing: 0.4px;
    transition:    background 0.18s, opacity 0.18s, transform 0.12s;
    margin-top:    4px;
}

.hdc-submit-btn:hover:not(:disabled) {
    background: #D75123;
}

.hdc-submit-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.hdc-submit-btn:disabled {
    opacity: 0.65;
    cursor:  not-allowed;
}

/* ── Success panel ────────────────────────────────────────────── */
.hdc-success-card {
    padding:    48px 24px 28px;
    text-align: center;
}

.hdc-success-icon {
    width:           84px;
    height:          84px;
    background:      #fff;
    color:           var(--hdc-primary);
    border:          6px solid var(--hdc-primary);
    border-radius:   50%;
    font-size:       42px;
    font-weight:     700;
    line-height:     72px;
    margin:          0 auto 22px;
}

.hdc-success-title {
    font-size:     22px;
    font-weight:   700;
    color:         #1A1E22;
    margin-bottom: 8px;
    line-height:   1.1;
}

.hdc-success-subtitle {
    font-size:     18px;
    font-weight:   600;
    color:         #1A1E22;
    margin-bottom: 10px;
    line-height:   1.2;
}

.hdc-success-desc {
    font-size:   15px;
    color:       #1A1E22;
    line-height: 1.6;
    max-width:   900px;
    margin:      0 auto;
}

.hdc-booking-ref {
    margin-top:    16px;
    font-size:     13px;
    font-weight:   500;
    color:         var(--hdc-primary);
    background:    var(--hdc-primary-light);
    border-radius: var(--hdc-radius-sm);
    padding:       8px 14px;
    display:       inline-block;
}

.hdc-success-ok-btn {
    margin-top: 24px;
}

@media (max-width: 900px) {
    .hdc-success-card {
        padding: 36px 18px 24px;
    }

    .hdc-success-icon {
        width:       70px;
        height:      70px;
        border-width: 5px;
        font-size:   34px;
        line-height: 60px;
        margin-bottom: 18px;
    }

    .hdc-success-title {
        font-size:   22px;
        margin-bottom: 8px;
    }

    .hdc-success-subtitle {
        font-size:   18px;
        margin-bottom: 10px;
    }

    .hdc-success-desc {
        font-size: 15px;
    }
}

@media (max-width: 520px) {
    .hdc-success-title {
        font-size: 22px;
    }

    .hdc-success-subtitle {
        font-size: 18px;
    }

    .hdc-success-desc {
        font-size: 15px;
    }
}

/* ─────────────────────────────────────────────────────────────── */
/*  Payment panel                                                  */
/* ─────────────────────────────────────────────────────────────── */

.hdc-payment-panel {
    animation: hdc-fade-in 0.2s ease;
}

.hdc-payment-card {
    padding: 20px 20px 24px;
}

.hdc-payment-header {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin-bottom:  16px;
}

.hdc-payment-title {
    font-size:   17px;
    font-weight: 600;
    color:       #1A1E22;
}

.hdc-booking-ref-tag {
    font-size:     12px;
    font-weight:   500;
    color:         var(--hdc-primary);
    background:    var(--hdc-primary-light);
    border-radius: 6px;
    padding:       3px 10px;
    display:       inline-block;
    align-self:    flex-start;
}

/* ── Countdown banner ─────────────────────────────────────────── */
.hdc-countdown-banner {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    background:      #FFF8E7;
    border:          1.5px solid #E8BA00;
    border-radius:   var(--hdc-radius-sm);
    padding:         10px 16px;
    margin-bottom:   16px;
    transition:      background 0.3s, border-color 0.3s;
}

.hdc-countdown-banner.hdc-countdown-expired {
    background:   #FFF1F0;
    border-color: #FF3B30;
}

.hdc-countdown-label {
    font-size: 14px;
    color:     #7A6200;
}

.hdc-countdown-timer {
    font-size:            22px;
    font-weight:          700;
    color:                #D4900A;
    font-variant-numeric: tabular-nums;
    letter-spacing:       1px;
    min-width:            52px;
    text-align:           center;
}

.hdc-countdown-banner.hdc-countdown-expired .hdc-countdown-timer {
    color: #FF3B30;
}

/* ── Bank info section ────────────────────────────────────────── */
.hdc-bank-info {
    margin-bottom: 16px;
}

.hdc-bank-loading,
.hdc-bank-error {
    text-align: center;
    color:      #98A2B3;
    font-size:  14px;
    padding:    16px 0;
}

.hdc-bank-error { color: #FF3B30; }

.hdc-bank-card {
    background:     #F8F9FA;
    border:         1.5px solid #E9ECEF;
    border-radius:  var(--hdc-radius-sm);
    padding:        16px;
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.hdc-bank-card-header {
    font-size:      12px;
    font-weight:    600;
    color:          #98A2B3;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.hdc-bank-account-row {
    display:     flex;
    align-items: center;
    gap:         14px;
}

.hdc-bank-logo {
    width:         56px;
    height:        56px;
    border-radius: var(--hdc-radius-sm);
    object-fit:    contain;
    flex-shrink:   0;
    background:    #fff;
    border:        1px solid #E9ECEF;
}

.hdc-bank-account-meta {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    flex:           1;
    min-width:      0;
}

.hdc-bank-name {
    font-size: 13px;
    color:     #98A2B3;
}

.hdc-bank-account-name-tag {
    font-size:     13px;
    font-weight:   500;
    color:         #19346B;
    background:    #EBF0FF;
    border-radius: 4px;
    padding:       2px 8px;
    display:       inline-block;
    align-self:    flex-start;
}

.hdc-bank-account-number {
    font-size:            20px;
    font-weight:          700;
    color:                #1A1E22;
    letter-spacing:       1.5px;
    font-variant-numeric: tabular-nums;
}

.hdc-copy-btn {
    display:        block;
    width:          100%;
    padding:        10px 0;
    background:     #fff;
    color:          var(--hdc-primary);
    border:         1.5px solid var(--hdc-primary);
    border-radius:  var(--hdc-radius-sm);
    font-family:    var(--hdc-font);
    font-size:      14px;
    font-weight:    500;
    cursor:         pointer;
    letter-spacing: 0.3px;
    text-align:     center;
    transition:     background 0.15s, color 0.15s;
}

.hdc-copy-btn:hover {
    background: var(--hdc-primary-light);
}

/* ── Slip upload ──────────────────────────────────────────────── */
.hdc-slip-section {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin-bottom:  16px;
}

.hdc-slip-upload-area {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    min-height:      120px;
    border:          2px dashed #D0D5DD;
    border-radius:   var(--hdc-radius-sm);
    cursor:          pointer;
    padding:         20px;
    overflow:        hidden;
    transition:      border-color 0.15s, background 0.15s;
}

.hdc-slip-upload-area:hover {
    border-color: var(--hdc-primary);
    background:   var(--hdc-primary-light);
}

.hdc-slip-placeholder {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            8px;
    color:          #98A2B3;
    font-size:      14px;
    text-align:     center;
    pointer-events: none;
}

.hdc-slip-icon { font-size: 28px; }

.hdc-slip-preview {
    max-width:     100%;
    max-height:    240px;
    border-radius: var(--hdc-radius-sm);
    object-fit:    contain;
    display:       block;
}

/* ─────────────────────────────────────────────────────────────── */
/*  Guest selection section                                        */
/* ─────────────────────────────────────────────────────────────── */

.hdc-guests-section {
    margin-bottom: 20px;
}

.hdc-section-title {
    font-size:     15px;
    font-weight:   600;
    color:         #1A1E22;
    margin-bottom: 12px;
}

/* Utility: hidden row */
.hdc-row-hidden {
    display: none !important;
}

/* ── Counter row ──────────────────────────────────────────────── */
.hdc-counter-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 0;
    border-bottom:   1px solid #F2F4F7;
}

.hdc-counter-row:last-child {
    border-bottom: none;
}

.hdc-counter-label-group {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.hdc-counter-icon {
    font-size:   18px;
    line-height: 1;
    flex-shrink: 0;
}

.hdc-counter-label {
    font-size:  15px;
    color:      #344054;
    font-weight: 400;
}

.hdc-counter-ctrl {
    display:     flex;
    align-items: center;
    gap:         4px;
}

.hdc-counter-btn {
    width:         36px;
    height:        36px;
    border:        1.5px solid #D0D5DD;
    border-radius: 50%;
    background:    #fff;
    color:         #344054;
    font-size:     20px;
    line-height:   1;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background 0.15s, border-color 0.15s;
    flex-shrink:   0;
    font-family:   var(--hdc-font);
    padding:       0;
}

.hdc-counter-btn:hover:not(:disabled) {
    background:    var(--hdc-primary-light);
    border-color:  var(--hdc-primary);
    color:         var(--hdc-primary);
}

.hdc-counter-btn:disabled {
    opacity: 0.35;
    cursor:  not-allowed;
}

.hdc-counter-val {
    min-width:   32px;
    text-align:  center;
    font-size:   17px;
    font-weight: 600;
    color:       #1A1E22;
}

/* ── Pets toggle buttons ──────────────────────────────────────── */
.hdc-pet-btns {
    display: flex;
    gap:     8px;
}

.hdc-pet-btn {
    padding:       8px 18px;
    border:        1.5px solid #D0D5DD;
    border-radius: 20px;
    background:    #fff;
    color:         #667085;
    font-family:   var(--hdc-font);
    font-size:     14px;
    font-weight:   500;
    cursor:        pointer;
    transition:    background 0.15s, border-color 0.15s, color 0.15s;
}

.hdc-pet-btn--active {
    background:   var(--hdc-primary);
    border-color: var(--hdc-primary);
    color:        #fff;
}

.hdc-pet-btn:hover:not(.hdc-pet-btn--active) {
    border-color: var(--hdc-primary);
    color:        var(--hdc-primary);
}

/* ── Coupon code row ──────────────────────────────────────────── */
.hdc-coupon-row {
    display:   flex;
    gap:       8px;
    margin-top: 14px;
}

.hdc-coupon-input {
    flex:          1;
    padding:       10px 14px;
    border:        1.5px solid #D0D5DD;
    border-radius: var(--hdc-radius-sm);
    font-family:   var(--hdc-font);
    font-size:     14px;
    color:         #1A1E22;
    background:    #fff;
    outline:       none;
    transition:    border-color 0.15s, box-shadow 0.15s;
}

.hdc-coupon-input::placeholder { color: #C0C6CF; }

.hdc-coupon-input:focus {
    border-color: var(--hdc-primary);
    box-shadow:   0 0 0 3px rgba(236, 89, 38, 0.12);
}

.hdc-coupon-use-btn {
    padding:       10px 20px;
    background:    var(--hdc-primary);
    color:         #fff;
    border:        none;
    border-radius: var(--hdc-radius-sm);
    font-family:   var(--hdc-font);
    font-size:     14px;
    font-weight:   600;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background 0.15s;
    flex-shrink:   0;
}

.hdc-coupon-use-btn:hover { background: #D75123; }

.hdc-coupon-error {
    display:    block;
    font-size:  12px;
    color:      #FF3B30;
    margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────── */
/*  Price summary card                                             */
/* ─────────────────────────────────────────────────────────────── */

.hdc-price-card {
    background:    #F9FAFB;
    border:        1px solid #E4E7EC;
    border-radius: var(--hdc-radius-sm);
    padding:       14px 16px;
    margin-bottom: 20px;
}

.hdc-price-rows {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.hdc-price-row {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    font-size:       14px;
}

.hdc-price-label {
    color: #667085;
}

.hdc-price-amount {
    font-weight: 500;
    color:       #1A1E22;
}

.hdc-price-row--discount .hdc-price-amount {
    color: #24BB3B;
}

.hdc-price-divider {
    height:     1px;
    background: #E4E7EC;
    margin:     4px 0;
}

.hdc-price-total-row {
    font-size:   16px;
    font-weight: 700;
}

.hdc-price-total-row .hdc-price-label,
.hdc-price-total-row .hdc-price-amount {
    color:       var(--hdc-primary);
    font-weight: 700;
}

.hdc-price-loading {
    text-align: center;
    color:      #98A2B3;
    font-size:  13px;
    padding:    4px 0;
}