/**
 * Rent2Wheels – Booking Widget & Product Page Sections
 * All R2W sections on the single product page:
 *   – Requirements, Included extras, Paid extras, Booking form
 *   – Technical Specs tab
 *
 * Design principles:
 *   – Flat white cards, 0.5px borders, 12px radius
 *   – CSS variables for dark-mode compatibility
 *   – Mobile-first, max 2 columns on narrow viewports
 */

/* ═══════════════════════════════════════════════════════════════
   R2W DESIGN TOKENS — single source of truth for colours & spacing
   Aligned with admin design system since 1.2.28.
═══════════════════════════════════════════════════════════════ */
.r2w-bw-section,
.r2w-booking-widget {
    --r2w-primary:           #1E3A5F;
    --r2w-primary-dark:      #142845;
    --r2w-primary-light:     #E8EFF8;
    --r2w-accent:            #E8B84B;
    --r2w-accent-dark:       #C99B2E;
    --r2w-success:           #2E7D32;
    --r2w-success-light:     #E8F5E9;
    --r2w-danger:            #B71C1C;
    --r2w-light:             #F4F7FB;
    --r2w-border:            #DCE3EC;
    --r2w-border-soft:       #EEF2F7;
    --r2w-text:              #1A2332;
    --r2w-text-muted:        #6B7C8D;
    --r2w-radius:            10px;
    --r2w-radius-sm:         6px;

    /* Compatibility aliases — let existing rules keep working */
    --color-background-primary:   #fff;
    --color-background-secondary: var(--r2w-light);
    --color-border-tertiary:      var(--r2w-border);
    --color-text-primary:         var(--r2w-text);
    --color-text-secondary:       var(--r2w-text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   SHARED SECTION WRAPPER
   All blocks are full-width children of .product (WC container).
   On mobile they get side margins.
══════════════════════════════════════════════════════════════ */

.r2w-bw-section,
.r2w-booking-widget {
    box-sizing: border-box;
    margin-bottom: 20px;
    font-family: inherit;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION CARD WRAPPER
   Each block looks like a clean flat card.
══════════════════════════════════════════════════════════════ */

.r2w-bw-section {
    background: var(--color-background-primary, #fff);
    border: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,.12));
    border-radius: 12px;
    padding: 24px 28px;
}

/* ── Section heading ─────────────────────────────────────────── */
.r2w-bw-section__title {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-secondary, #546E7A);
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.r2w-bw-section__icon {
    font-size: 32px;
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
   REQUIREMENTS  – card grid matching spec-tab metric cards
══════════════════════════════════════════════════════════════ */

.r2w-req-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.r2w-req-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: var(--color-background-secondary, #F8F9FA);
    border: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,.10));
    border-radius: 10px;
}

.r2w-req-item span.r2w-req-item__icon {
    font-size: 44px;
    line-height: 1;
    margin-bottom: 8px;
}

.r2w-req-item strong {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-text-secondary, #546E7A);
    display: block;
}

.r2w-req-item span {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-text-primary, #263238);
    line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSORY ROWS  (free + paid)
══════════════════════════════════════════════════════════════ */

.r2w-acc-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.r2w-acc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--color-background-secondary, #F8F9FA);
    border: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,.10));
    transition: background .15s, border-color .15s;
}

/* Free accessories – subtle green tint */
.r2w-acc-item--free {
    background: color-mix(in srgb, #2E7D32 6%, var(--color-background-primary, #fff));
    border-color: color-mix(in srgb, #2E7D32 20%, transparent);
}

/* Paid accessories when toggled on */
.r2w-acc-item--paid.active {
    background: color-mix(in srgb, #1565C0 6%, var(--color-background-primary, #fff));
    border-color: color-mix(in srgb, #1565C0 25%, transparent);
}

.r2w-acc-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}

.r2w-acc-details {
    flex: 1;
    min-width: 0;
}

.r2w-acc-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary, #263238);
    display: block;
}

.r2w-acc-desc {
    font-size: 12px;
    color: var(--color-text-secondary, #546E7A);
    display: block;
    margin-top: 2px;
}

.r2w-acc-price {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary, #546E7A);
    white-space: nowrap;
    flex-shrink: 0;
}

.r2w-acc-price--free {
    font-size: 12px;
    font-weight: 500;
    color: #2E7D32;
    letter-spacing: .02em;
}

.r2w-acc-sizes {
    margin-top: 8px;
}

.r2w-acc-size {
    font-size: 13px;
    padding: 5px 10px;
    border: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,.2));
    border-radius: 6px;
    background: var(--color-background-primary, #fff);
}

/* ── Toggle switch ───────────────────────────────────────────── */
.r2w-toggle {
    width: 38px !important;
    height: 22px !important;
    border-radius: 11px !important;  /* round – matches included-extras style */
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    border: none !important;
    padding: 0 !important;
    transition: background .2s;
    background: rgba(0,0,0,.15);
    box-sizing: content-box !important;
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
}

.r2w-toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: left .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* Higher specificity to override reset.css button { background: transparent } */
.r2w-acc-item .r2w-toggle--on,
.r2w-acc-item .r2w-toggle--off,
button.r2w-toggle--on,
button.r2w-toggle--off          { cursor: pointer; }

button.r2w-toggle--on,
.r2w-toggle--on                 { background: #2E7D32 !important; cursor: default; }

button.r2w-toggle--off,
.r2w-toggle--off                { background: #C62828 !important; }

button.r2w-toggle--off:not(:disabled):hover,
.r2w-toggle--off:not(:disabled):hover { background: #B71C1C !important; }

.r2w-toggle--on::after          { left: 19px; }

/* ═══════════════════════════════════════════════════════════════
   BOOKING FORM  (dates + price + CTA)
══════════════════════════════════════════════════════════════ */

/* ── Date row ───────────────────────────────────────────────── */
.r2w-date-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 14px;
}

/* Wrap label+input together as a clickable unit */
.r2w-date-field {
    flex: 1;
    cursor: pointer;
}

.r2w-date-field {
    flex: 1;
}

.r2w-date-field label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-secondary, #546E7A);
    margin-bottom: 6px;
}

.r2w-date-input {
    width: 100%;
    padding: 10px 14px;
    border: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,.2));
    border-radius: 8px;
    font-size: 14px;
    color: var(--color-text-primary, #263238);
    background: var(--color-background-secondary, #F8F9FA);
    box-sizing: border-box;
    transition: border-color .15s, background .15s;
    font-family: inherit;
    cursor: pointer;
    display: block;
}

/* Make the entire date field clickable – not just the tiny calendar icon */
.r2w-date-input::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    opacity: 0;
    cursor: pointer;
}

/* Ensure the wrapper is positioned for the overlay */
.r2w-date-field {
    position: relative;
}

.r2w-date-input:focus {
    outline: none;
    border-color: #1565C0;
    background: var(--color-background-primary, #fff);
}

/* ── Date + Time combined layout ────────────────────────────── */
.r2w-datetime-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    align-items: center;
}

.r2w-time-select {
    padding: 10px 10px 10px 12px;
    border: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,.2));
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--color-text-primary, #263238);
    background: var(--color-background-secondary, #F8F9FA);
    cursor: pointer;
    transition: border-color .15s;
    width: 90px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23546E7A' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}

.r2w-time-select:focus {
    outline: none;
    border-color: #1565C0;
    background-color: var(--color-background-primary, #fff);
}

/* Mobile ≤600px: stack date above time */
@media (max-width: 600px) {
    .r2w-datetime-wrap {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .r2w-time-select { width: 100%; }
}

.r2w-date-arrow {
    font-size: 18px;
    color: var(--color-text-secondary, #546E7A);
    padding-bottom: 10px;
    flex-shrink: 0;
}

/* ── Days badge ─────────────────────────────────────────────── */
.r2w-days-display {
    margin-top: 16px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.r2w-days-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, #1565C0 10%, var(--color-background-primary, #fff));
    color: #1565C0;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, #1565C0 30%, transparent);
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.4;
}

/* Mobile: full-width pill with more breathing room */
@media (max-width: 480px) {
    .r2w-days-display {
        margin-top: 14px;
        margin-bottom: 12px;
    }
    .r2w-days-badge {
        font-size: 14px;
        padding: 8px 20px;
    }
}

/* ── Availability status ────────────────────────────────────── */
.r2w-avail-status {
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.r2w-avail-status.available {
    background: color-mix(in srgb, #2E7D32 8%, var(--color-background-primary, #fff));
    color: #2E7D32;
    border: 0.5px solid color-mix(in srgb, #2E7D32 25%, transparent);
}

.r2w-avail-status.unavailable {
    background: color-mix(in srgb, #C62828 8%, var(--color-background-primary, #fff));
    color: #C62828;
    border: 0.5px solid color-mix(in srgb, #C62828 25%, transparent);
}

/* ── Price summary ──────────────────────────────────────────── */
.r2w-price-box {
    background: var(--color-background-secondary, #F8F9FA);
    border: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,.10));
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.r2w-price-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.r2w-price-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--color-text-secondary, #546E7A);
}

.r2w-price-line--divider {
    height: 0.5px;
    background: var(--color-border-tertiary, rgba(0,0,0,.12));
    margin: 4px 0;
}

.r2w-price-line--total {
    font-size: 17px;
    font-weight: 500;
    color: var(--color-text-primary, #263238);
}

.r2w-price-line--deposit {
    font-size: 13px;
    color: #1565C0;
}

/* ── CTA Buttons ─────────────────────────────────────────────── */
.r2w-bw-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: none;
    background: transparent;
    padding: 0;
}

.r2w-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border: 0.5px solid transparent;
    transition: all .15s;
    font-family: inherit;
    text-decoration: none;
    letter-spacing: .01em;
}

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

/* High-specificity selectors so theme styles (e.g. WP themes overriding
   .button or .button.primary) don't break our brand colours. */
.r2w-booking-widget .r2w-btn--primary,
.r2w-bw-section .r2w-btn--primary,
button.r2w-btn--primary {
    background: var(--r2w-primary, #1E3A5F);
    color: #fff !important;
    border-color: var(--r2w-primary, #1E3A5F);
}

.r2w-booking-widget .r2w-btn--primary:not(:disabled):hover,
.r2w-bw-section .r2w-btn--primary:not(:disabled):hover,
button.r2w-btn--primary:not(:disabled):hover {
    background: var(--r2w-primary-dark, #142845);
    border-color: var(--r2w-primary-dark, #142845);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(30,58,95,.18);
}

.r2w-booking-widget .r2w-btn--secondary,
.r2w-bw-section .r2w-btn--secondary,
button.r2w-btn--secondary {
    background: #fff;
    color: var(--r2w-primary, #1E3A5F) !important;
    border-color: var(--r2w-border, #DCE3EC);
}

.r2w-booking-widget .r2w-btn--secondary:not(:disabled):hover,
.r2w-bw-section .r2w-btn--secondary:not(:disabled):hover,
button.r2w-btn--secondary:not(:disabled):hover {
    background: var(--r2w-primary-light, #E8EFF8);
    border-color: var(--r2w-primary, #1E3A5F);
    color: var(--r2w-primary, #1E3A5F) !important;
}

.r2w-btn--link {
    background: transparent;
    color: var(--color-text-secondary, #546E7A);
    border-color: transparent;
    font-size: 13px;
    padding: 6px 0;
}

.r2w-btn-hint {
    font-size: 12px;
    color: var(--color-text-secondary, #546E7A);
    margin: 0;
    text-align: center;
    line-height: 1.5;
}

/* ── RFQ panel ──────────────────────────────────────────────── */
.r2w-rfq-panel {
    background: var(--color-background-secondary, #F8F9FA);
    border: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,.10));
    border-radius: 10px;
    padding: 20px;
    margin-top: 12px;
}

.r2w-rfq-panel h4 {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary, #263238);
}

.r2w-rfq-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.r2w-rfq-fields input,
.r2w-rfq-fields textarea {
    width: 100%;
    padding: 10px 14px;
    border: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,.2));
    border-radius: 8px;
    font-size: 14px;
    background: var(--color-background-primary, #fff);
    box-sizing: border-box;
    font-family: inherit;
    color: var(--color-text-primary, #263238);
    transition: border-color .15s;
}

.r2w-rfq-fields input:focus,
.r2w-rfq-fields textarea:focus {
    outline: none;
    border-color: #1565C0;
}

.r2w-rfq-fields textarea { resize: vertical; min-height: 80px; }

.r2w-rfq-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.r2w-rfq-response {
    display: none;
    margin-top: 16px;
    font-size: 14px;
    padding: 16px 18px;
    border-radius: 10px;
    border: 2px solid transparent;
    line-height: 1.5;
}

.r2w-rfq-response.success {
    background: #F0FBF1;
    border-color: #2E7D32;
    color: #1B5E20;
}

.r2w-rfq-response.error {
    background: #FFF0F0;
    border-color: #C62828;
    color: #7F0000;
}

/* ═══════════════════════════════════════════════════════════════
   TECHNICAL SPECS TAB  – metric card grid
══════════════════════════════════════════════════════════════ */

.r2w-specs-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    padding: 4px 0 8px;
}

.r2w-spec-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 22px;
    background: var(--color-background-primary, #fff);
    border: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,.12));
    border-radius: 12px;
}

.r2w-spec-card__icon {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 8px;
}

.r2w-spec-card__label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-secondary, #546E7A);
}

.r2w-spec-card__value {
    font-size: 28px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--color-text-primary, #263238);
}

.r2w-spec-card__unit {
    font-size: 13px;
    color: var(--color-text-secondary, #546E7A);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE  – Tablet ≤768px
══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    .r2w-bw-section,
    .r2w-booking-widget {
        width: 94%;
        margin-left: auto;
        margin-right: auto;
    }

    .r2w-bw-section { padding: 18px 20px; }

    .r2w-req-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* ── Date row stacks at ≤600px to prevent overflow ─────────── */
@media (max-width: 600px) {
    .r2w-date-row {
        flex-direction: column;
        gap: 10px;
    }

    .r2w-date-arrow { display: none; }

    .r2w-date-input { font-size: 16px; } /* prevent iOS zoom */
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE  – Mobile Portrait ≤480px
══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

    .r2w-bw-section,
    .r2w-booking-widget {
        width: 92%;
        margin-left: auto;
        margin-right: auto;
    }

    .r2w-bw-section { padding: 16px; border-radius: 10px; margin-bottom: 12px; }

    .r2w-bw-section__title { font-size: 10px; margin-bottom: 14px; }
    .r2w-bw-section__icon { font-size: 28px; }

    /* Requirements: single column */
    .r2w-req-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .r2w-req-item { padding: 14px 16px; }
    .r2w-req-item span.r2w-req-item__icon { font-size: 40px; }
    .r2w-req-item strong { font-size: 16px; }
    .r2w-req-item span { font-size: 17px; }


    /* Accessories: compact */
    .r2w-acc-item { padding: 10px 12px; gap: 10px; }
    .r2w-acc-name { font-size: 13px; }
    .r2w-acc-price { font-size: 12px; }

    /* Buttons: full width */
    .r2w-btn { width: 100%; padding: 14px; }

    .r2w-rfq-actions { flex-direction: column; }
    .r2w-rfq-actions .r2w-btn { width: 100%; }

    /* Specs */
    .r2w-specs-wrap { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .r2w-spec-card { padding: 14px 16px; }
    .r2w-spec-card__icon  { font-size: 20px; margin-bottom: 4px; }
    .r2w-spec-card__value { font-size: 22px; }
    .r2w-spec-card__label { font-size: 10px; }
    .r2w-spec-card__unit  { font-size: 12px; }

    /* Prevent iOS input zoom (must be ≥16px on focus) */
    .r2w-date-input:focus,
    .r2w-rfq-fields input:focus,
    .r2w-rfq-fields textarea:focus { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   DESCRIPTION TAB  – same card style as specs + booking sections
══════════════════════════════════════════════════════════════ */

.r2w-desc-box {
    background: var(--color-background-primary, #fff);
    border: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,.12));
    border-radius: 12px;
    padding: 28px 32px;
}

.r2w-desc-box__content {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-primary, #263238);
    max-width: 72ch;
}

.r2w-desc-box__content p  { margin: 0 0 1em; }
.r2w-desc-box__content p:last-child { margin-bottom: 0; }
.r2w-desc-box__content h2,
.r2w-desc-box__content h3,
.r2w-desc-box__content h4 {
    font-weight: 500;
    margin: 1.4em 0 .5em;
    color: var(--color-text-primary, #263238);
}
.r2w-desc-box__content ul,
.r2w-desc-box__content ol {
    padding-left: 1.4em;
    margin: 0 0 1em;
}
.r2w-desc-box__content li { margin-bottom: .35em; }
.r2w-desc-box__content a  { color: #1565C0; }

@media (max-width: 480px) {
    .r2w-desc-box { padding: 18px 16px; border-radius: 10px; }
    .r2w-desc-box__content { font-size: 14px; }
}

/* Reviews box – same card, slightly more space for the form */
.r2w-reviews-box { padding: 28px 32px; }

.r2w-reviews-box .r2w-desc-box__content { max-width: 100%; }

/* WC review list inside our card */
.r2w-reviews-box #reviews { margin: 0; }
.r2w-reviews-box #comments h2,
.r2w-reviews-box #reply-title { font-size: 15px; font-weight: 500; margin: 0 0 16px; }
.r2w-reviews-box .commentlist { padding: 0; list-style: none; }
.r2w-reviews-box .commentlist .comment_container {
    display: flex; gap: 14px; padding: 14px 0;
    border-bottom: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,.10));
}
.r2w-reviews-box .commentlist li:last-child .comment_container { border-bottom: none; }
.r2w-reviews-box #review_form_wrapper { margin-top: 20px; }
.r2w-reviews-box #review_form input,
.r2w-reviews-box #review_form textarea {
    border: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,.2));
    border-radius: 8px; padding: 10px 14px; font-family: inherit;
    background: var(--color-background-secondary, #F8F9FA);
}
.r2w-reviews-box #review_form input:focus,
.r2w-reviews-box #review_form textarea:focus {
    outline: none; border-color: #1565C0;
    background: var(--color-background-primary, #fff);
}
.r2w-reviews-box #review_form .submit {
    background: #1565C0; color: #fff; border: none;
    padding: 12px 24px; border-radius: 10px; font-size: 14px;
    font-weight: 500; cursor: pointer; font-family: inherit;
}
.r2w-reviews-box #review_form .submit:hover { background: #0D47A1; }

@media (max-width: 480px) {
    .r2w-reviews-box,
    .r2w-desc-box { padding: 16px; border-radius: 10px; }
    .r2w-desc-box__content { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   RFQ FORM – Extended (Personal + License + Requirements)
══════════════════════════════════════════════════════════════ */

.r2w-rfq-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text-primary, #263238);
    margin: 20px 0 12px;
    padding-bottom: 8px;
    border-bottom: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,.12));
}

.r2w-rfq-section-title:first-child { margin-top: 0; }

.r2w-rfq-section-title span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1565C0;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Two-column grid for form fields */
.r2w-rfq-fields--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.r2w-rfq-field-wrap { display: flex; flex-direction: column; gap: 5px; }
.r2w-rfq-field-wrap--full { grid-column: 1 / -1; }

.r2w-rfq-field-label {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-text-secondary, #546E7A);
}

.r2w-rfq-field-hint {
    font-size: 11px;
    color: var(--color-text-secondary, #546E7A);
    margin-top: 2px;
}

.r2w-rfq-field-hint--req {
    color: #E65100;
    font-weight: 500;
}

/* Inputs + selects – same style */
.r2w-rfq-fields--2col input,
.r2w-rfq-fields--2col select,
.r2w-rfq-fields--2col textarea {
    width: 100%;
    padding: 10px 14px;
    border: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,.2));
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--color-text-primary, #263238);
    background: var(--color-background-secondary, #F8F9FA);
    box-sizing: border-box;
    transition: border-color .15s, background .15s;
    -webkit-appearance: none;
    appearance: none;
}

.r2w-rfq-fields--2col select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23546E7A' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.r2w-rfq-fields--2col input:focus,
.r2w-rfq-fields--2col select:focus,
.r2w-rfq-fields--2col textarea:focus {
    outline: none;
    border-color: #1565C0;
    background: var(--color-background-primary, #fff);
}

/* Requirements confirmations */
.r2w-rfq-requirements {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: var(--color-background-secondary, #F8F9FA);
    border: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,.10));
    border-radius: 10px;
}

.r2w-rfq-req-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.r2w-rfq-req-check {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: #2E7D32;
    cursor: pointer;
}

.r2w-rfq-req-text {
    font-size: 13px;
    color: var(--color-text-primary, #263238);
    line-height: 1.5;
}

/* Mobile ≤480px */
@media (max-width: 480px) {
    .r2w-rfq-fields--2col {
        grid-template-columns: 1fr;
    }
    .r2w-rfq-field-wrap--full { grid-column: 1; }

    .r2w-rfq-fields--2col input:focus,
    .r2w-rfq-fields--2col select:focus { font-size: 16px; }
}

/* ── Deposit info note ──────────────────────────────────────── */
.r2w-deposit-note {
    margin: 10px 0 0;
    padding: 10px 14px;
    background: color-mix(in srgb, #1565C0 8%, var(--color-background-primary, #fff));
    border: 0.5px solid color-mix(in srgb, #1565C0 20%, transparent);
    border-radius: 8px;
    font-size: 12px;
    color: var(--color-text-secondary, #546E7A);
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   CART & CHECKOUT – Rental price breakdown rows
   Shown above the WC order total when advance payment is active.
══════════════════════════════════════════════════════════════ */

.r2w-breakdown-row th,
.r2w-breakdown-row td {
    padding: 6px 0;
    font-size: 14px;
}

.r2w-breakdown-full td  { color: var(--color-text-secondary, #546E7A); }
.r2w-breakdown-deposit td { color: #1565C0; }
.r2w-breakdown-balance th,
.r2w-breakdown-balance td { font-weight: 600; color: var(--color-text-primary, #263238); border-top: 1px solid rgba(0,0,0,.08); padding-top: 8px; }

/* ═══════════════════════════════════════════════════════════════
   CART / CHECKOUT TOTALS – Rental deposit display
══════════════════════════════════════════════════════════════ */

/* Hide the internal WC balance-deduction fee row (negative fee
   that adjusts the math – displayed via our custom breakdown rows) */
.cart_totals tr.fee td[data-title="r2w-balance-deduction"],
.woocommerce-checkout-review-order tr.fee td[data-title="r2w-balance-deduction"] {
    display: none;
}
tr.fee:has(td[data-title="r2w-balance-deduction"]) {
    display: none;
}

/* Rename "Gesamtsumme" → "Gesamtsumme zur sofortigen Bezahlung"
   when advance payment is active (class added via PHP below)    */
/* order-total label handled via ::after */

/* ═══════════════════════════════════════════════════════════════
   WOOCOMMERCE CART PAGE – visual only, no layout overrides
══════════════════════════════════════════════════════════════ */

/* Footer spacing */
.woocommerce-cart main { padding-bottom: 60px !important; }
@media (min-width: 1024px) { .woocommerce-cart main { padding-bottom: 80px !important; } }

/* Card wrapper – border + radius only, NO overflow:hidden */
.woocommerce-cart-form {
    border: 0.5px solid rgba(0,0,0,.12);
    border-radius: 12px;
    background: #fff;
}

/* Header */
.woocommerce-cart-form table.cart thead th {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #546E7A;
    padding: 12px 10px;
    border-bottom: 0.5px solid rgba(0,0,0,.10);
    background: #F8F9FA;
}

/* Rows */
.woocommerce-cart-form table.cart tbody tr {
    border-bottom: 0.5px solid rgba(0,0,0,.08);
}
.woocommerce-cart-form table.cart tbody tr:last-child { border-bottom: none; }
.woocommerce-cart-form table.cart td { padding: 14px 10px; vertical-align: middle; }

/* Image */
.woocommerce-cart table.cart img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
}

/* Product name */
.woocommerce-cart-form .product-name a { font-weight: 500; color: #263238; text-decoration: none; }
.woocommerce-cart-form .product-name a:hover { color: #1565C0; }
.wc-item-meta { margin: 4px 0 0; padding: 0; list-style: none; }
.wc-item-meta li { font-size: 11px; color: #546E7A; line-height: 1.5; display: flex; gap: 4px; }
.wc-item-meta .wc-item-meta-label { font-weight: 500; }

/* Remove */
.woocommerce-cart-form a.remove { color: #C62828 !important; font-size: 16px !important; }

/* Quantity – plain text */
.woocommerce-cart-form .product-quantity strong {
    font-size: 13px; font-weight: 500; color: #263238;
    background: none !important; border: none !important;
    padding: 0 !important; border-radius: 0 !important;
}

/* Actions row background only */
.woocommerce-cart-form td.actions {
    background: #F8F9FA;
    border-top: 0.5px solid rgba(0,0,0,.10);
    padding: 12px 14px !important;
}

/* Coupon input */
.woocommerce-cart-form .coupon label { display: none; }
.woocommerce-cart-form #coupon_code {
    padding: 8px 12px;
    border: 0.5px solid rgba(0,0,0,.2);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    min-width: 200px;
}
.woocommerce-cart-form #coupon_code:focus { outline: none; border-color: #1565C0; }

/* All WC cart buttons */
.woocommerce-cart-form .button,
.cart_totals .button {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border: 0.5px solid rgba(21,101,192,.5) !important;
    background: #fff !important;
    color: #1565C0 !important;
    transition: background .15s;
    text-decoration: none;
}
.woocommerce-cart-form .button:not(:disabled):hover,
.cart_totals .button:hover { background: rgba(21,101,192,.06) !important; }
.woocommerce-cart-form [name="update_cart"]:disabled { opacity: .35; cursor: not-allowed; }

/* Cart totals */
.cart_totals {
    background: #fff;
    border: 0.5px solid rgba(0,0,0,.12);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 8px;
}
.cart_totals h2 {
    font-size: 11px; font-weight: 500; text-transform: uppercase;
    letter-spacing: .08em; color: #546E7A; margin: 0;
    padding: 12px 20px;
    border-bottom: 0.5px solid rgba(0,0,0,.10);
    background: #F8F9FA;
}
.cart_totals .shop_table { border-collapse: collapse; width: 100%; margin: 0; }
.cart_totals .shop_table tr { border-bottom: 0.5px solid rgba(0,0,0,.08); }
.cart_totals .shop_table tr:last-child { border-bottom: none; }
.cart_totals .shop_table th,
.cart_totals .shop_table td { padding: 12px 20px; font-size: 14px; vertical-align: middle; }
.cart_totals .shop_table th { font-weight: 400; color: #546E7A; }
.cart_totals .shop_table td { text-align: right; }
.r2w-breakdown-row.r2w-breakdown-deposit th,
.r2w-breakdown-row.r2w-breakdown-deposit td { color: #1565C0; font-weight: 500; }
.cart_totals .order-total th,
.cart_totals .order-total td {
    font-size: 15px; font-weight: 600;
    padding: 14px 20px;
    border-top: 0.5px solid rgba(0,0,0,.12);
}
.cart_totals .wc-proceed-to-checkout { padding: 14px 20px; }
.cart_totals .checkout-button {
    width: 100% !important;
    padding: 13px 28px !important;
    background: #1565C0 !important;
    color: #fff !important;
    border-color: #1565C0 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: center;
    display: block;
}
.cart_totals .checkout-button:hover { background: #0D47A1 !important; }

/* Hide balance deduction row */
tr.fee:has(td[data-title="r2w-balance-deduction"]) { display: none !important; }

/* Mobile ≤600px */
@media (max-width: 600px) {
    .woocommerce-cart-form,
    .cart_totals { border-radius: 10px; }
    .woocommerce-cart-form #coupon_code { font-size: 16px; min-width: 0; width: 100%; }
    .cart_totals .shop_table th,
    .cart_totals .shop_table td { padding: 10px 14px; font-size: 13px; }
    .cart_totals .order-total th,
    .cart_totals .order-total td { padding: 12px 14px; }
    .cart_totals .wc-proceed-to-checkout,
    .cart_totals .checkout-button { padding: 12px !important; }
}


/* ── Hide internal fee row ───────────────────────────────────── */
tr.fee:has(td[data-title="r2w-balance-deduction"]) { display: none !important; }

/* ── Rental breakdown rows ───────────────────────────────────── */
.r2w-bd th, .r2w-bd td { font-size: 13px; padding: 8px 20px; }

.r2w-bd-rental th { color: var(--color-text-secondary, #546E7A); }
.r2w-bd-rental td { color: var(--color-text-secondary, #546E7A); }

.r2w-bd-acc th { color: var(--color-text-secondary, #546E7A); padding-left: 28px; }
.r2w-bd-acc td { color: var(--color-text-secondary, #546E7A); }

.r2w-bd-total { border-top: 0.5px solid rgba(0,0,0,.10); }
.r2w-bd-total th strong, .r2w-bd-total td strong { color: var(--color-text-primary, #263238); font-size: 14px; }

.r2w-bd-deposit th { color: #1565C0; font-weight: 500; }
.r2w-bd-deposit td { color: #1565C0; font-weight: 500; }

.r2w-bd-balance { border-bottom: 0.5px solid rgba(0,0,0,.10); margin-bottom: 4px; }
.r2w-bd-balance th strong, .r2w-bd-balance td strong { color: var(--color-text-primary, #263238); }

/* Order total label: "Gesamtsumme jetzt fällig" when deposit active */
.r2w-deposit-active .order-total > th::after {
    content: " jetzt fällig";
    font-size: 15px;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════
   DATEPICKER FRONTEND POLISH (1.2.30)
   Forces full-width inputs + matches admin calendar look exactly.
   ═══════════════════════════════════════════════════════════════════ */
.r2w-booking-widget .r2w-datetime-wrap .r2w-date-input,
.r2w-booking-widget .r2w-datetime-wrap input.r2w-datepicker {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
}

/* Calendar popup polish — matches admin */
.ui-datepicker {
    width: 17em;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--r2w-border, #DCE3EC);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(30,58,95,.08), 0 2px 4px rgba(30,58,95,.04);
    font-family: inherit;
    font-size: 13px;
    z-index: 99999 !important;
}

.ui-datepicker-header {
    position: relative;
    background: var(--r2w-light, #F4F7FB);
    border: none;
    border-radius: 6px;
    padding: 6px 4px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

/* Hide the text labels — only arrows show */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background: #fff;
    border: 1px solid var(--r2w-border, #DCE3EC);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    position: static !important;
    margin: 0;
    width: 0;
    height: 0;
    text-indent: 0;
    overflow: visible;
    color: transparent;
    display: inline-block;
}

.ui-datepicker .ui-datepicker-prev::before {
    content: "‹";
    color: var(--r2w-primary, #1E3A5F);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}
.ui-datepicker .ui-datepicker-next::before {
    content: "›";
    color: var(--r2w-primary, #1E3A5F);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    background: var(--r2w-primary-light, #E8EFF8);
    border-color: var(--r2w-primary, #1E3A5F);
}

.ui-datepicker-title {
    flex: 1 1 auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0 !important;
    line-height: 1;
}

.ui-datepicker-title select {
    margin: 0 !important;
    padding: 3px 6px !important;
    font-size: 13px !important;
    border: 1px solid var(--r2w-border, #DCE3EC) !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: var(--r2w-text, #1A2332) !important;
    height: auto !important;
    width: auto !important;
    max-width: 80px;
}

/* Calendar table */
.ui-datepicker table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 13px;
}

.ui-datepicker th {
    padding: 4px 0;
    text-align: center;
    color: var(--r2w-text-muted, #6B7C8D);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    border: none;
    background: transparent;
}

.ui-datepicker td {
    padding: 1px;
    border: none;
}

.ui-datepicker td a,
.ui-datepicker td span {
    display: block;
    text-align: center;
    padding: 5px 0;
    border-radius: 4px;
    text-decoration: none;
    color: var(--r2w-text, #1A2332);
    background: transparent;
    border: none;
    font-weight: 500;
}

.ui-datepicker td a:hover {
    background: var(--r2w-primary-light, #E8EFF8);
    color: var(--r2w-primary, #1E3A5F);
}

.ui-datepicker td.ui-datepicker-today a,
.ui-datepicker td.ui-datepicker-today span {
    background: var(--r2w-accent, #E8B84B);
    color: #fff;
    font-weight: 700;
}

.ui-datepicker td a.ui-state-active {
    background: var(--r2w-primary, #1E3A5F) !important;
    color: #fff !important;
}

.ui-datepicker td.ui-state-disabled span,
.ui-datepicker td.ui-datepicker-unselectable span {
    color: #B0BEC5;
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════
   Booking Rule Hints (1.2.45)
   Two notice styles: warning (next-day blocked) + info (min duration).
   Inserted between availability status and price box.
   ═══════════════════════════════════════════════════════════════ */
.r2w-booking-hints:empty {
    display: none;
}

.r2w-booking-hint {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin: 12px 0;
    border-radius: 10px;
    border: 1px solid;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 1px 3px rgba(30, 58, 95, .06);
}

.r2w-booking-hint--warning {
    background: #FFF4E5;
    border-color: #E65100;
    color: #6E2900;
}

.r2w-booking-hint--info {
    background: #E8EFF8;
    border-color: #1E3A5F;
    color: #142845;
}

.r2w-booking-hint--error {
    background: #FFF0F0;
    border: 3px solid #C62828;
    color: #7F0000;
    box-shadow: 0 0 0 2px rgba(198, 40, 40, .15);
}

.r2w-booking-hint__icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

.r2w-booking-hint__body {
    flex: 1 1 auto;
    min-width: 0;
}

.r2w-booking-hint__body strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 4px;
}

.r2w-booking-hint__body p {
    margin: 0;
    font-size: 13px;
}

.r2w-booking-hint__wa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 14px;
    background: #25D366;
    color: #fff !important;
    border-radius: 6px;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s;
}

.r2w-booking-hint__wa:hover {
    background: #1EAE54;
    color: #fff !important;
}

@media (max-width: 600px) {
    .r2w-booking-hint {
        padding: 12px 14px;
    }
    .r2w-booking-hint__wa {
        width: 100%;
        justify-content: center;
    }
}