/* Casa Alento Pricing Engine — Frontend Styles */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.cap-booking-wrap {
    max-width: 760px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #2C2C2C;
}

.cap-form-header {
    text-align: center;
    margin-bottom: 28px;
}
.cap-form-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: #8B2500;
    margin-bottom: 6px;
}
.cap-form-header p {
    font-size: 14px;
    color: #888;
    margin: 0;
}

/* ── Form grid ────────────────────────────────────────────────────────────── */
.cap-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
@media (max-width: 600px) {
    .cap-form-grid { grid-template-columns: 1fr; }
}

.cap-form-section {
    background: #fff;
    border: 1px solid #e8e0d8;
    border-radius: 12px;
    padding: 20px;
}
.cap-form-section h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 16px;
    color: #2C2C2C;
}

/* ── Date fields ──────────────────────────────────────────────────────────── */
.cap-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.cap-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.cap-date-input {
    width: 100%;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: #2C2C2C;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.cap-date-input:focus {
    outline: none;
    border-color: #8B2500;
}

/* ── Guest rows ───────────────────────────────────────────────────────────── */
.cap-guest-grid { display: flex; flex-direction: column; gap: 14px; }
.cap-guest-row  {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cap-guest-label .cap-guest-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
}
.cap-guest-label .cap-guest-sub {
    display: block;
    font-size: 11px;
    color: #888;
    margin-top: 1px;
}

/* ── Stepper ──────────────────────────────────────────────────────────────── */
.cap-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cap-step-btn {
    width: 32px;
    height: 32px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    background: #f8f5f2;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: #2C2C2C;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
}
.cap-step-btn:hover {
    border-color: #8B2500;
    background: #FAECE7;
    color: #8B2500;
}
.cap-stepper input[type="number"] {
    width: 36px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 700;
    color: #2C2C2C;
    -moz-appearance: textfield;
}
.cap-stepper input[type="number"]::-webkit-outer-spin-button,
.cap-stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── Hints ────────────────────────────────────────────────────────────────── */
.cap-hint {
    font-size: 12px;
    color: #888;
    margin: 10px 0 0;
    min-height: 16px;
}
.cap-guest-total { color: #8B2500; font-weight: 500; }

/* ── Price summary ────────────────────────────────────────────────────────── */
.cap-price-summary {
    background: #fff;
    border: 1.5px solid #e8e0d8;
    border-radius: 12px;
    padding: 24px;
    margin-top: 4px;
}
.cap-price-summary h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 12px 0 16px;
}
.cap-season-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}

/* Line items */
.cap-line-items { margin-bottom: 12px; }
.cap-line-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0ece8;
    font-size: 14px;
}
.cap-line-item:last-child { border-bottom: none; }
.cap-li-label { color: #555; }
.cap-li-amount { font-weight: 600; }

.cap-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    font-weight: 700;
    color: #8B2500;
    padding: 12px 0;
    border-top: 2px solid #FAECE7;
    margin-top: 4px;
}

.cap-cleaning-note {
    font-size: 12px;
    color: #888;
    margin: 8px 0 16px;
}

/* Warnings */
.cap-min-nights-warning {
    background: #FFF3E0;
    border: 1px solid #FFB74D;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #C45C00;
    margin-bottom: 14px;
}

/* Book button */
.cap-book-btn {
    width: 100%;
    padding: 16px;
    background: #8B2500;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
}
.cap-book-btn:hover:not(:disabled) { background: #A0522D; }
.cap-book-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}
.cap-secure-note {
    text-align: center;
    font-size: 12px;
    color: #aaa;
    margin: 10px 0 0;
}

/* ── Loading ──────────────────────────────────────────────────────────────── */
.cap-loading {
    text-align: center;
    padding: 24px;
    color: #888;
}
.cap-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #FAECE7;
    border-top-color: #8B2500;
    border-radius: 50%;
    animation: cap-spin 0.7s linear infinite;
    margin: 0 auto 12px;
}
@keyframes cap-spin { to { transform: rotate(360deg); } }

/* ── Error ────────────────────────────────────────────────────────────────── */
.cap-error {
    background: #FAECE7;
    border: 1px solid #F5C4B3;
    border-radius: 8px;
    padding: 12px 16px;
    color: #8B2500;
    font-size: 14px;
    margin-top: 8px;
}

/* ── Rate Card shortcode ──────────────────────────────────────────────────── */
.cap-rate-card-wrap { max-width: 760px; margin: 0 auto; }
.cap-rc-title { font-size: 24px; font-weight: 700; color: #8B2500; margin-bottom: 6px; }
.cap-rc-sub   { font-size: 13px; color: #888; margin-bottom: 24px; }
.cap-rc-season { border-radius: 10px; overflow: hidden; margin-bottom: 20px; border: 1px solid #e8e0d8; }
.cap-rc-season-header {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    padding: 14px 18px;
    font-size: 14px;
}
.cap-rc-table { width: 100%; border-collapse: collapse; }
.cap-rc-table th, .cap-rc-table td {
    padding: 10px 16px;
    text-align: left;
    font-size: 14px;
    border-bottom: 1px solid #f0ece8;
}
.cap-rc-table th { background: #f8f5f2; font-weight: 600; font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 0.4px; }
.cap-rc-table tr:last-child td { border-bottom: none; }
.cap-rc-kids { padding: 14px 18px; background: #FAECE7; border-radius: 8px; font-size: 14px; color: #8B2500; }