/* UI-01: our additions to the Santhiya V2 skin (santhiya-v2.css, the design team's file).
   Loaded after it on the Santhiya rooms page (new-hotel-detail.php, HID_STY_HEAD). Same tokens
   (:root in santhiya-v2.css): it styles what the engine gained after the design snapshot and
   keeps the AC-01 contrast and target sizes. */

:root { --sak-text: #8f4a2b; }  /* --sak darkened for text: 5.3:1 on --sak-soft, 5.9:1 on --paper */

/* ---- AC-01: design colours that fall under 4.5:1 for small text --------------------------- */
/* search box: --thong labels are 3.7:1 at the --brand end of the gradient; --gold-line is 4.6:1 */
body .frm-search label, body .bgs label, body .frm-search .sc-inslide-box, body .font-adults, body .font-child { color: var(--gold-line) !important; }
/* non-refundable chip and its "available": --sak was 3.8:1 / 4.2:1 */
body .room-box[data-nrf="1"] .box-item-center > strong, body .room-box[data-nrf="1"] .avail-txt { color: var(--sak-text) !important; }
/* small print in --ink-mute was 3.0:1: "Rate (THB)", "rooms", the tax line */
body .rate-txt span, body .rm-txt span, body .sp-txt, body .tax_p { color: var(--ink-soft) !important; }
/* rate-plan dates the hotel typed in red: the design's dark brown on gold, over the AC-01 red in m_se_css */
#room_box .can-txt span[style*="color:red"], #room_box .can-txt span[style*="color: red"] { color: var(--brand-deep) !important; }

/* ---- What the engine gained after the design snapshot ------------------------------------- */
/* BK-02 step bar */
.booking-steps { color: var(--ink-soft) !important; font-size: 13.5px; }
.booking-steps li.on { color: var(--brand-deep) !important; font-weight: 600; }
.booking-steps li span { border-color: var(--gold-line) !important; }
.booking-steps li.on span { background: var(--brand); border-color: var(--brand) !important; color: var(--cream); }
/* SR-01 nights count and SR-02 code note sit on the dark search box */
.frm-search .search-nights, .bgs .search-nights { color: var(--cream) !important; }
.frm-search .discode-note, .bgs .discode-note { color: var(--cream) !important; font-weight: 600; }
/* BK-01 member invite */
.member-invite { background: var(--gold-soft); border: 1px solid var(--gold-line) !important; border-left: 3px solid var(--thong) !important; border-radius: 2px !important; color: var(--ink) !important; }
.member-invite a { color: var(--brand) !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--thong); }
/* RM-02 rooms that cannot be booked: only the photo fades, the reason stays readable */
body .rmt-unavailable { opacity: 1 !important; }  /* the row carries an inline opacity:.6 (phones add it outside #room_box) */
.rmt-unavailable .rmt-img { filter: grayscale(1); opacity: .55; }
.rmt-unavailable label { color: var(--ink-soft) !important; }
.rmt-unavailable p { color: var(--ink-soft); }
.rmt-unavailable .btn { background: transparent !important; border: 1px solid var(--brand) !important; color: var(--brand) !important; border-radius: 2px !important; font-weight: 600; }
.rmt-unavailable .btn:hover { background: var(--brand) !important; color: var(--cream) !important; }
/* SKC "Only 2 rooms left" */
.btn-book .rooms-left { color: var(--sak-text) !important; font-weight: 600; }
/* RM-05 "Select this room" in the room pop-up, like the Select buttons */
.rmt-modal .rmt-modal-select { background: var(--brand) !important; color: var(--cream) !important; border-radius: 2px !important; font-weight: 600; }
.rmt-modal .rmt-modal-select:hover { background: var(--espresso) !important; }
/* "no rooms for these dates" message: its link was Bootstrap blue (4.1:1) and 16px tall */
.no-room h1 a { display: inline-block; padding: 10px 0; color: var(--brand) !important; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--thong); }