/* ELITE modern theme -- layered on top of salon.css, never edits it directly.
   Palette: #967C56 (main gold), #BBA077 (light gold), #4A1B0C (dark text-on-gold).

   IMPORTANT LESSON (2026-08-21): the base plugin reuses ".sln-input" as a
   marker class on BOTH real <input> elements AND on wrapper <div>s (e.g. the
   service search box, which wraps an icon + input together). A first version
   of this file targeted ".sln-input" generically and broke the search box
   layout in production. Every rule below targets the element type together
   with the class (e.g. "input.sln-input") so wrapper divs are never touched,
   and each rule has been verified live in the browser against the real
   booking page before being written here. Extend this file the same way:
   verify in the browser first, keep selectors as narrow as possible. */

:root {
    --elite-gold: #967C56;
    --elite-gold-light: #BBA077;
    --elite-gold-dark: #4A1B0C;
    --elite-gold-wash: rgba(150, 124, 86, 0.10);
}

/* ---------- Real form fields only (verified against the service search box,
   which wraps its <input> in a div that ALSO carries the .sln-input class --
   these tag-qualified selectors deliberately skip that wrapper). ---------- */

input.sln-input,
select.sln-input,
textarea.sln-input {
    border-radius: 12px !important;
    border: 1px solid #e2ddd3 !important;
    background: #faf8f5 !important;
}

input.sln-input:focus,
select.sln-input:focus,
textarea.sln-input:focus {
    border-color: var(--elite-gold) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--elite-gold-wash) !important;
}

/* The service-search wrapper div: round its corners only. Do NOT add
   padding/width/box-sizing here -- that's what broke the icon alignment
   last time, since the inner input already reserves space for the icon. */
.sln-service-search {
    border-radius: 12px !important;
}

/* ---------- Buttons (verified: no wrapper-div collisions found for these
   classes -- .sln-btn is only ever applied to actual <a>/<button> elements). ---------- */

.sln-btn {
    border-radius: 12px !important;
    font-weight: 500 !important;
}

.sln-btn--emphasis {
    background: var(--elite-gold) !important;
    border-color: var(--elite-gold) !important;
}

.sln-btn--emphasis:hover {
    background: var(--elite-gold-dark) !important;
    border-color: var(--elite-gold-dark) !important;
}

.sln-btn--borderonly:not(.sln-btn--emphasis),
.sln-btn--nobkg:not(.sln-btn--emphasis),
.sln-btn--borderonly:not(.sln-btn--emphasis) button,
.sln-btn--borderonly:not(.sln-btn--emphasis) a,
.sln-btn--borderonly:not(.sln-btn--emphasis) input,
.sln-btn--nobkg:not(.sln-btn--emphasis) button,
.sln-btn--nobkg:not(.sln-btn--emphasis) a,
.sln-btn--nobkg:not(.sln-btn--emphasis) input {
    border-color: var(--elite-gold-light) !important;
    color: var(--elite-gold) !important;
}

/* FIX (2026-08-22, revised): the plugin puts both --emphasis and
   --borderonly on some buttons at once (e.g. the "Cancel"/"Leave a
   feedback" buttons in Area Riservata: class="sln-btn sln-btn--emphasis
   ... sln-btn--borderonly ..."). Two problems, not one:
   1) without this rule, the block above leaves gold text on the solid
      gold --emphasis background -- invisible.
   2) the visible text is not on the classed <div> itself but on a nested
      <button> (see views/shortcode/salon_my_account/_salon_my_account_details_table_rows.php,
      e.g. `<div class="sln-btn sln-btn--emphasis ..."><button>Annulla</button></div>`).
      <button> does NOT inherit `color` from its parent the way a plain
      <span> would -- browsers give form controls their own initial color
      -- so a rule on the wrapping div alone never reaches the label text.
      The base plugin itself works around this by styling
      ".sln-btn--emphasis button/a/input" explicitly (see salon.css ~L364);
      this rule does the same for the wrapper + all three child types. */
.sln-btn--emphasis.sln-btn--borderonly,
.sln-btn--emphasis.sln-btn--nobkg,
.sln-btn--emphasis.sln-btn--borderonly button,
.sln-btn--emphasis.sln-btn--borderonly a,
.sln-btn--emphasis.sln-btn--borderonly input,
.sln-btn--emphasis.sln-btn--nobkg button,
.sln-btn--emphasis.sln-btn--nobkg a,
.sln-btn--emphasis.sln-btn--nobkg input {
    color: #fff !important;
}

/* FIX (2026-08-22, root cause): the block above still wasn't enough for
   the "Annulla" / "Lascia un feedback" buttons specifically, because
   WordPress's own admin-generated color CSS (Salon > Impostazioni >
   Colori personalizzati -- css/sln-colors--custom.css is the *template*
   for it; the real one is generated server-side with the admin's chosen
   colors filled in) ships this exact rule:

       #sln-salon #sln-salon-my-account .sln-account__card__footer
       .sln-btn--borderonly button { color: <main gold color> }

   That selector carries TWO ID selectors (#sln-salon, #sln-salon-my-account),
   which outranks the class-only rule above in CSS specificity regardless
   of !important or file load order -- so the nested <button> kept
   rendering in gold-on-gold inside the account card footer specifically.
   Matching that exact selector (with one extra class tacked on) is the
   only way to reliably win here. */
#sln-salon #sln-salon-my-account .sln-account__card__footer .sln-btn--emphasis.sln-btn--borderonly,
#sln-salon #sln-salon-my-account .sln-account__card__footer .sln-btn--emphasis.sln-btn--borderonly button,
#sln-salon #sln-salon-my-account .sln-account__card__footer .sln-btn--emphasis.sln-btn--borderonly a,
#sln-salon #sln-salon-my-account .sln-account__card__footer .sln-btn--emphasis.sln-btn--borderonly input,
#sln-salon #sln-salon-my-account .sln-account__card__footer .sln-btn--emphasis.sln-btn--nobkg,
#sln-salon #sln-salon-my-account .sln-account__card__footer .sln-btn--emphasis.sln-btn--nobkg button,
#sln-salon #sln-salon-my-account .sln-account__card__footer .sln-btn--emphasis.sln-btn--nobkg a,
#sln-salon #sln-salon-my-account .sln-account__card__footer .sln-btn--emphasis.sln-btn--nobkg input,
.sln-bootstrap #sln-salon-my-account .sln-account__card__footer .sln-btn--emphasis.sln-btn--borderonly button,
.sln-bootstrap #sln-salon-my-account .sln-account__card__footer .sln-btn--emphasis.sln-btn--nobkg button {
    color: #fff !important;
}

/* ---------- My Account: booking cards (2026-08-22). The base plugin
   renders these with a flat light-grey card and a hardcoded blue-grey
   header (rgb(202,216,224)) that has nothing to do with the site's
   palette. Only background-color, color, border-radius and box-shadow are
   touched here -- no padding, margin, width, or position -- so this can't
   disturb the card's internal layout (the header's flex alignment, the
   body padding, etc. all stay exactly as the base plugin defines them).
   The card already has overflow:hidden, so rounding it clips the header's
   background to match with no separate radius needed on the header.
   NOTE: unlike the sections above, this was NOT re-verified live in the
   browser -- the preview tool couldn't scroll this specific page during
   this session. Check the "Area Riservata" booking list after deploying;
   revert this block if anything looks off. ---------- */

#sln-salon-my-account .sln-account__card,
#sln-salon #sln-salon-my-account .sln-account__card {
    background-color: #faf8f5 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(74, 27, 12, 0.08) !important;
}

#sln-salon-my-account .sln-account__card .sln-account__card__header,
#sln-salon #sln-salon-my-account .sln-account__card .sln-account__card__header {
    background-color: var(--elite-gold-wash) !important;
}

#sln-salon-my-account .sln-account__card .sln-account__card__header .sln-account__card__header__el,
#sln-salon #sln-salon-my-account .sln-account__card .sln-account__card__header .sln-account__card__header__el {
    color: var(--elite-gold-dark) !important;
}

#sln-salon-my-account .sln-account__card .sln-account__card__total .sln-account__card__total__amount,
#sln-salon #sln-salon-my-account .sln-account__card .sln-account__card__total .sln-account__card__total__amount {
    color: var(--elite-gold-dark) !important;
}

/* ---------- Alerts: round to match the rest of the UI (2026-08-22). Base
   .sln-alert has border-radius:0 and no background of its own here
   (success/warning/danger variants set their background elsewhere,
   untouched by this rule); its status icon is absolutely positioned
   top/left, independent of border-radius, so rounding the box can't move
   the icon. Same live-verification caveat as the card block above. ---------- */

.sln-alert,
#sln-salon .alert {
    border-radius: 12px !important;
}

/* ---------- Everything below this line is NOT yet applied
   (dormant / not enqueued) until it has been checked live in the browser
   the same way the rules above were. Add new sections here as they're
   verified, one at a time. ---------- */