/* Fie Coffee — the checkout seam.
   One stylesheet over OpenCart's own cart, checkout and confirmation pages
   (catalog/controller/fie/seam.php adds it on those routes only), so the
   step from the storefront into OpenCart keeps the same world: the
   volcanic ground, cream text, the ember accent spent on the action, Sofia
   Sans Condensed for headings, Montserrat for the rest, square corners.
   Written against Bootstrap 3, which both the shop's theme (tt_zonan2) and
   OpenCart's default theme are built on; the theme's own blocks are named
   below where the live markup showed them. Nothing here changes what the
   pages do. Tokens as src/index.css. */

:root {
  --fie-volcanic: #17130f;
  --fie-deep: #1e1811;
  --fie-cream: #f0e9dc;
  --fie-muted: #8a8175;
  --fie-faint: #967c5d;
  --fie-ember: #cba35e;
  --fie-bronze: #4a3b2a;
  --fie-line: rgba(240, 233, 220, 0.14);
  --fie-display: 'Sofia Sans Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --fie-body: Montserrat, 'Segoe UI', Helvetica, Arial, sans-serif;
  --fie-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;
}

/* -- the ground ------------------------------------------------------ */
/* Bootstrap 3 sets html to 10px for its own rem values; the storefront's
   stylesheet (app.css, the shell) is rem-based on 16px */
html { font-size: 16px !important; }
html,
body,
body .wrapper,
body #container,
body #content,
body #error-not-found {
  background: var(--fie-volcanic) !important;
  color: var(--fie-cream) !important;
}
body {
  font-family: var(--fie-body) !important;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body * {
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* -- type ------------------------------------------------------------ */
/* A heading inside .fie-prose — the text pages, round 38 — is the
   storefront stylesheet's (src/index.css, THE TEXT PAGES), so these rules
   stop at its edge. :where() adds nothing to a selector's specificity (h1
   stays 0,0,1), so nothing else on these pages changes its order. */
:is(h1, h2, h3, h4, h5, h6):where(:not(.fie-prose *)),
.panel-title,
legend,
.checkout-heading,
#accordion .panel-heading {
  font-family: var(--fie-display) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fie-cream) !important;
  line-height: 1.05;
}
h1:where(:not(.fie-prose *)) { font-size: 40px !important; margin: 28px 0 22px !important; }
h2:where(:not(.fie-prose *)) { font-size: 30px !important; }
h3:where(:not(.fie-prose *)), h4:where(:not(.fie-prose *)), .panel-title { font-size: 20px !important; }
legend { border-bottom: 1px solid var(--fie-line) !important; padding-bottom: 8px; }
a { color: var(--fie-cream); text-decoration: underline; text-decoration-color: var(--fie-line); text-underline-offset: 3px; }
/* hover takes the ember; focus shows as its ring alone (round 38: a focused link that also turned
   ember read, at its letters, as part of its ring — ember on its own cream, 1.7:1 — and a two-line
   link's ring then fell under the gate's 90 %) */
a:hover { color: var(--fie-ember); text-decoration-color: var(--fie-ember); }
.text-muted, .help-block, small { color: var(--fie-muted) !important; }
.text-danger { color: #e0a08a !important; }
.text-success { color: #b9c9a0 !important; }
.price, .price-new, .price-tax, td.text-right, .checkout-cart td.text-right {
  font-family: var(--fie-mono) !important;
  font-variant-numeric: tabular-nums;
}
.price-old { color: var(--fie-faint) !important; }

/* -- the theme's chrome (tt_zonan2 names off the live cart page; the
      default theme's ids beside them) -------------------------------- */
#header, header, #top, .header-middle, .pt-menu, .pt-menu-bar, .pt-menu-bar *,
#menu, #menu .navbar-collapse, #menu .btn-navbar, #menu .navbar-header, #category, .navbar, .navbar-default,
footer, .footer-top, .footer-bottom, footer .container, #back-top {
  background: var(--fie-volcanic) !important;
  background-image: none !important;
  color: var(--fie-cream) !important;
  border-color: var(--fie-line) !important;
}
#top, header, footer, .footer-top { border-top: 1px solid var(--fie-line) !important; }
#header a, header a, .pt-menu a, #menu a, footer a, .footer-content a, .dropdown-menu.footer-content a,
#menu .navbar-nav > li > a, #menu .dropdown-menu a {
  color: var(--fie-cream) !important;
  background: transparent !important;
  text-decoration: none;
  font-family: var(--fie-display) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
#header a:hover, .pt-menu a:hover, #menu a:hover, footer a:hover { color: var(--fie-ember) !important; }
.dropdown-menu, .dropdown-menu.footer-content { background: var(--fie-deep) !important; border: 1px solid var(--fie-line) !important; }
.dropdown-toggle.title { color: var(--fie-muted) !important; }
#cart, #cart .btn, #cart-total, .search-container, #search, #search .form-control {
  background: var(--fie-deep) !important;
  color: var(--fie-cream) !important;
  border-color: var(--fie-line) !important;
}
.breadcrumb { background: transparent !important; padding-left: 0; font-family: var(--fie-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; }
.breadcrumb > li + li:before { color: var(--fie-muted); }
.breadcrumb a { color: var(--fie-muted); text-decoration: none; }
.social-block, .payment, .payment img { filter: grayscale(1) opacity(0.6); }

/* -- surfaces -------------------------------------------------------- */
.panel, .panel-default, .well, .list-group-item, .thumbnail, .alert, .modal-content, .table-responsive {
  background: var(--fie-deep) !important;
  border: 1px solid var(--fie-line) !important;
  color: var(--fie-cream) !important;
}
.panel-heading, .panel-default > .panel-heading, .list-group-item.active {
  background: transparent !important;
  border-bottom: 1px solid var(--fie-line) !important;
  color: var(--fie-cream) !important;
}
.panel-body { border-top: 0 !important; }
.well { padding: 18px 20px; }
.alert-success { border-color: var(--fie-ember) !important; }
.alert-danger, .alert-warning { border-color: #e0a08a !important; }
hr { border-color: var(--fie-line) !important; }

/* -- tables (the cart, the checkout summary) ------------------------- */
.table, .table-bordered, .table > thead > tr > td, .table > thead > tr > th,
.table > tbody > tr > td, .table > tfoot > tr > td, .table-bordered > tbody > tr > td, .table-bordered > thead > tr > td {
  border-color: var(--fie-line) !important;
  background: transparent !important;
  color: var(--fie-cream) !important;
  vertical-align: middle !important;
}
.table > thead > tr > td, .table > thead > tr > th {
  font-family: var(--fie-display) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  color: var(--fie-muted) !important;
  border-bottom: 1px solid var(--fie-line) !important;
}
.table-bordered { border-left: 0 !important; border-right: 0 !important; }
.table td.text-left a { font-family: var(--fie-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; }
.table img.img-thumbnail { border: 1px solid var(--fie-line) !important; background: var(--fie-volcanic) !important; padding: 0; }
.table-hover > tbody > tr:hover > td { background: rgba(240, 233, 220, 0.03) !important; }

/* -- forms ----------------------------------------------------------- */
/* A field's edge at 0.42 cream (round 38 §1c: 0.24 read 1.9:1 against the ground; a field's
   boundary wants 3:1 — 3.5:1 now, on the page and on a panel alike). The same edge on md_checkout's
   fields, its city search and its login form below. */
.form-control, select.form-control, textarea.form-control, .input-group-addon {
  background: var(--fie-volcanic) !important;
  border: 1px solid rgba(240, 233, 220, 0.42) !important;
  color: var(--fie-cream) !important;
  height: 44px;
  font-family: var(--fie-body);
}
textarea.form-control { height: auto; }
.form-control:focus { border-color: var(--fie-ember) !important; outline: 2px solid var(--fie-ember); outline-offset: 1px; }
.form-control::placeholder { color: var(--fie-muted); }
select.form-control option { background: var(--fie-deep); color: var(--fie-cream); }
.control-label, label { color: var(--fie-cream) !important; font-weight: 400; }
.form-horizontal .control-label { color: var(--fie-muted) !important; text-align: left; }
.radio label, .checkbox label { color: var(--fie-cream) !important; }
input[type='radio'], input[type='checkbox'] { accent-color: var(--fie-ember); }
.has-error .form-control { border-color: #e0a08a !important; }
.required .control-label:before { color: #e0a08a !important; }

/* -- buttons: the one accent on the action --------------------------- */
.btn { font-family: var(--fie-display) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.1em; font-size: 15px !important; padding: 12px 22px !important; border: 1px solid transparent !important; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.btn-primary, .btn-primary:focus, #button-confirm, #button-payment-method, #button-shipping-method, #button-guest, #button-login, #button-register, #button-account, #button-payment-address, #button-shipping-address {
  background: var(--fie-ember) !important;
  color: var(--fie-volcanic) !important;
  border-color: var(--fie-ember) !important;
}
.btn-primary:hover, #button-confirm:hover { background: var(--fie-cream) !important; border-color: var(--fie-cream) !important; color: var(--fie-volcanic) !important; }
.btn-default, .btn-default:focus, .btn-light, .btn-info {
  background: transparent !important;
  color: var(--fie-cream) !important;
  border-color: rgba(240, 233, 220, 0.4) !important;
}
.btn-default:hover { background: var(--fie-cream) !important; color: var(--fie-volcanic) !important; }
.btn-danger { background: transparent !important; color: #e0a08a !important; border-color: #e0a08a !important; }
.btn-danger:hover { background: #e0a08a !important; color: var(--fie-volcanic) !important; }
.btn-sm, .btn-xs, .input-group-btn .btn { padding: 8px 12px !important; font-size: 13px !important; }
.input-group .form-control { height: 40px; }
.btn-block + .btn-block { margin-top: 10px; }

/* -- the checkout's accordion: steps as a ruled list ----------------- */
#accordion .panel { margin-bottom: 0 !important; border-bottom: 0 !important; }
#accordion .panel:last-child { border-bottom: 1px solid var(--fie-line) !important; }
#accordion .panel-heading { padding: 16px 20px; }
#accordion .panel-heading a { text-decoration: none; }
#accordion .panel-body { padding: 20px; }
.checkout-checkout #content > h1 { margin-bottom: 8px !important; }

/* -- the confirmation ------------------------------------------------ */
.checkout-success #content h1 { font-size: 44px !important; }
.checkout-success #content p { max-width: 62ch; font-size: 16px; }

/* -- spacing --------------------------------------------------------- */
#content { padding: 28px 0 56px; min-height: 60vh; }
.buttons { margin-top: 28px; }
@media (max-width: 767px) {
  h1:where(:not(.fie-prose *)) { font-size: 32px !important; }
  .btn { width: 100%; }
  .buttons .pull-left, .buttons .pull-right { float: none !important; margin-bottom: 10px; }
  .table-responsive { border: 0 !important; }
}

/* -- under the shell (catalog/controller/fie/shell.php): the storefront's
      nav is fixed and 64 px tall, so OpenCart's content starts under it,
      and the page keeps the storefront's measure ------------------------ */
.fie-oc-page { padding-top: var(--top, 64px); min-height: 70vh; }
.fie-oc-page > .container, .fie-oc-page #error-not-found { max-width: 1180px; padding-left: var(--pad, 24px); padding-right: var(--pad, 24px); }

/* -- the text pages (round 38; the text itself is src/index.css, THE TEXT
      PAGES). tt_zonan2's stylesheet pads EVERY #content 200 px from the
      top, !important — room for its own tall header, which the shell has
      replaced with a 64 px nav — so on a phone the title of a text page
      stood under an empty third of the screen (measured at 390: the h1 at
      337 px). Here the page starts under the breadcrumb, and the
      breadcrumb stands on the reading column's left edge, not centred ---- */
#information-information #content { padding-top: 20px !important; }
#information-information .breadcrumb { text-align: left; margin-bottom: 8px; }

/* ====================================================================
   md_checkout — THE ONE-PAGE CHECKOUT
   ====================================================================

   What actually renders (established 2026-09-17, three sources checked in
   the order the shop resolves them):

     1. `occo_theme` — NO row for any checkout route. The five rows the
        Theme Editor holds are common/footer, common/header, common/home,
        common/success and product/product. The round-19 trap does not
        apply here.
     2. the OCMOD modification layer (`ocartdata/storage/modification/`) —
        NO md_checkout template. It DOES carry
        `catalog/controller/checkout/checkout.php`, and that is what sends
        the route here: it returns `new Action('md_checkout/checkout')`
        when `module_md_checkout_status` and `_token` are set.
     3. the file on disk — `catalog/view/theme/default/template/md_checkout/
        *.twig`. tt_zonan2 ships no `md_checkout/` folder, so `event/theme`
        (sort 500) points `template_directory` at `default/template/`.

   So the checkout's markup is the OCMOD's own, its class system is `md_*`
   (not Bootstrap), and its stylesheet is
   `catalog/view/theme/default/stylesheet/md_checkout/default.css` — a
   light UI: #fff panels, #ddd rules, #229ac8 blue, #2e9414 green, #000
   button, Roboto. seam.css loads AFTER it, and after the theme's, so this
   section is where the checkout joins the storefront's world.

   NOTHING HERE TOUCHES A TEMPLATE. Every `{% if %}` in md_checkout —
   office / door / machine per courier, pickup, guest vs registered, the
   invoice block, coupon / voucher / reward, the register form, the login
   popup — is left exactly as the OCMOD wrote it. A restyle that drops a
   conditional breaks a real order, so the restyle is CSS only.

   Two things it has to beat, hence the specificity and the !important:
     - the OCMOD's own `#md_checkout …` rules, several already !important;
     - an inline <style> the template prints AFTER every stylesheet, built
       from the admin's colour settings (module_md_checkout_color #999999,
       _color_button #000000). Its selectors are class-level, so an
       `#md_checkout`-scoped rule outranks them.

   THE COURIER AND BANK MARKS GET A CREAM PLATE, and that is measured, not
   taste. The logos are transparent PNGs with dark ink, drawn for a white
   page. Their load-bearing ink (darkest decile) against the two grounds:

       Еконт      #0f4e8c   volcanic 2.19:1   cream  6.99:1
       Спиди      #d80132   volcanic 2.84:1   cream  5.40:1
       вземане    #000000   volcanic 1.14:1   cream 17.39:1
       ДСК        #006438   volcanic 2.53:1   cream  6.04:1
       наложен    outline   volcanic 2.40:1   cream  6.38:1
       превод     #393939   volcanic 1.60:1   cream  9.57:1

   Every one fails WCAG 1.4.11's 3:1 for a graphical object on volcanic and
   clears it on cream. Recolouring is not open to us — a courier's and a
   bank's mark are theirs. So the mark sits on cream, like the paper label
   on the pack, and the row around it stays dark.
   -------------------------------------------------------------------- */

/* -- the frame ------------------------------------------------------- */
#md_checkout { color: var(--fie-cream); font-family: var(--fie-body); }
#md_checkout .md_container { max-width: 1180px !important; margin: 0 auto 64px !important; padding-left: var(--pad, 24px) !important; padding-right: var(--pad, 24px) !important; }
body #md_checkout h1.md_left {
  font-family: var(--fie-display) !important;
  font-size: 40px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fie-cream) !important;
  line-height: 1.05;
  margin: 4px 0 22px !important;
}
#md_checkout hr { border-color: var(--fie-line) !important; margin: 22px 0; }
#md_checkout .md_left_column { padding-right: 16px; }
#md_checkout .md_right_column { padding-left: 16px; }

/* the two header buttons — Вече имам акаунт / Продължи с пазаруването */
#md_checkout .md_btn_clear {
  background: transparent !important;
  color: var(--fie-cream) !important;
  border: 1px solid rgba(240, 233, 220, 0.4) !important;
  font-family: var(--fie-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px !important;
  padding: 11px 16px !important;
}
#md_checkout .md_btn_clear:hover, #md_checkout .md_btn_clear:focus {
  background: var(--fie-cream) !important;
  color: var(--fie-volcanic) !important;
  border-color: var(--fie-cream) !important;
}
#md_checkout .md_btn_clear span, #md_checkout .md_btn_clear i { color: inherit !important; }

/* -- the panels ------------------------------------------------------ */
#md_checkout .md_panel {
  background: var(--fie-deep) !important;
  border: 1px solid var(--fie-line) !important;
  margin: 0 0 18px 0;
}
#md_checkout .md_panel_heading {
  color: var(--fie-cream) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--fie-line) !important;
  padding: 15px 18px 13px 44px !important;
  font-family: var(--fie-display) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0 !important;
}
#md_checkout .md_panel_heading .md_panel_icon { left: 18px; margin-top: 1px; }
#md_checkout .md_right_column .md_panel_heading .md_panel_icon { left: 18px; }
#md_checkout .md_panel_icon { color: var(--fie-muted) !important; font-size: 17px; }
/* the OCMOD's 50px rule under every panel title: the one ember detail per panel */
#md_checkout .md_panel_text::after { background: var(--fie-ember) !important; bottom: -13px; width: 34px; }
#md_checkout .md_panel_body { background: transparent !important; padding: 20px 18px 20px !important; }
#md_checkout #md_shipping_methods .md_panel_body,
#md_checkout #md_payment_methods .md_panel_body { padding: 16px 18px 20px !important; }
#md_checkout #md_cart .md_panel_body { padding: 6px 18px 20px !important; font-size: 14px; }
#md_checkout .md_all_spin i.rotating { color: var(--fie-ember); }

/* -- fields ---------------------------------------------------------- */
body #md_checkout input[type="text"],
body #md_checkout input[type="password"],
body #md_checkout input[type="email"],
body #md_checkout input[type="tel"],
body #md_checkout input[type="number"],
body #md_checkout input[type="search"],
body #md_checkout input[type="date"],
body #md_checkout select,
body #md_checkout textarea {
  background: var(--fie-volcanic) !important;
  border: 1px solid rgba(240, 233, 220, 0.42) !important;
  color: var(--fie-cream) !important;
  font-family: var(--fie-body) !important;
  font-size: 15px !important;
  height: 46px;
  padding: 10px 12px !important;
  margin-top: 14px;
}
body #md_checkout textarea { height: 88px; }
body #md_checkout input:focus,
body #md_checkout select:focus,
body #md_checkout textarea:focus {
  border-color: var(--fie-ember) !important;
  outline: 2px solid var(--fie-ember);
  outline-offset: 1px;
}
#md_checkout ::placeholder { color: var(--fie-muted); opacity: 1; }
#md_checkout select option { background: var(--fie-deep); color: var(--fie-cream); }
#md_checkout label { color: var(--fie-cream) !important; font-weight: 400 !important; font-size: 14px !important; }
#md_checkout .md_floating_label { color: var(--fie-muted); }
#md_checkout input[type="radio"], #md_checkout input[type="checkbox"] { accent-color: var(--fie-ember); }
#md_checkout .md_check_box label, #md_checkout .md_agree label { font-weight: 400 !important; }
/* the required star and the "this field is done" tick */
#md_checkout .md_required_box:before { color: #e0a08a !important; }
#md_checkout .md_redy_box:after {
  color: var(--fie-volcanic) !important;
  background: var(--fie-ember) !important;
  border: 1px solid var(--fie-ember) !important;
  border-radius: 0 !important;
}

/* -- THE FIVE DELIVERY ROWS ------------------------------------------
   md_econt office / door / machine, md_speedy office / door / machine and
   pickup are the OCMOD's whole vocabulary; the shop offers five of them
   today (no machine on either courier). Nothing here assumes five: the
   rules are per row, so a sixth appears in the same clothes the day the
   module starts quoting it. -------------------------------------------- */
#md_checkout .md_shipping_methods { padding-top: 2px; }
#md_checkout .md_shipping_method label { margin: 0 0 10px 0 !important; display: block; position: relative; font-size: 15px !important; }
/* the radio was display:none, which takes the row out of the tab order
   entirely — the five options could not be reached or chosen from the
   keyboard. Visually hidden instead, so it still focuses. */
#md_checkout .md_shipping_method label input[type="radio"],
#md_checkout .md_payment_method label input[type="radio"] {
  display: block !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  left: 12px;
  top: 50%;
  pointer-events: none;
}
#md_checkout .md_shipping_method label input[type="radio"] + div {
  background: var(--fie-deep) !important;
  border: 1px solid var(--fie-line) !important;
  transition: border-color 0.2s, background-color 0.2s;
}
#md_checkout .md_shipping_method label:hover input[type="radio"] + div { border-color: rgba(240, 233, 220, 0.42) !important; }
#md_checkout .md_shipping_method label input[type="radio"]:checked + div {
  border-color: var(--fie-ember) !important;
  background: rgba(203, 163, 94, 0.07) !important;
  box-shadow: inset 0 0 0 1px var(--fie-ember) !important;
}
#md_checkout .md_shipping_method label input[type="radio"]:focus-visible + div {
  outline: 2px solid var(--fie-cream);
  outline-offset: 2px;
}
/* the courier's mark, on cream — see the measurement at the top */
#md_checkout .md_shipping_method label .md_shipping_method_icon {
  width: 62px !important;
  min-width: 62px;
  margin: 0 !important;
  background-color: var(--fie-cream) !important;
  background-size: 30px auto !important;
  background-position: center !important;
  border-right: 1px solid var(--fie-line) !important;
}
#md_checkout .md_shipping_method label .md_shipping_method_title {
  border-left: 0 !important;
  color: var(--fie-cream) !important;
  font-family: var(--fie-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  padding: 14px 16px !important;
  width: auto;
}
#md_checkout .md_shipping_method label .md_shipping_method_price {
  background: transparent !important;
  border-left: 1px solid var(--fie-line) !important;
  color: var(--fie-cream) !important;
  font-family: var(--fie-mono) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  font-size: 14px;
  width: 116px !important;
  min-width: 116px;
  padding: 14px 16px !important;
}
#md_checkout .md_shipping_method label input[type="radio"]:checked + div:after,
#md_checkout .md_payment_method label input[type="radio"]:checked + span:after {
  background: var(--fie-ember) !important;
  color: var(--fie-volcanic) !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 11px;
  right: 0;
  top: 0;
}

/* -- the courier's address panel and THE SETTLEMENT MODAL -------------
   #md_address_table is reloaded per row: econt_office / econt_address /
   econt_machine / speedy_office / speedy_address / speedy_machine /
   pickup. Their settlement pickers are magnific-popup panels
   (.radio_container) that were WHITE while the body colour was cream —
   white text on a white ground: the city list was unreadable. ---------- */
#md_checkout #md_econt_map .md_panel_text::after { display: none; }
#md_checkout #econt_office_locator,
#md_checkout a[id$="_locator"] {
  color: var(--fie-ember) !important;
  font-family: var(--fie-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
}
#md_checkout #econt_office_locator:hover, #md_checkout a[id$="_locator"]:hover { color: var(--fie-cream) !important; }
/* a readonly field that opens a picker is a control, not a disabled input */
body #md_checkout input[readonly] { cursor: pointer; background: var(--fie-volcanic) !important; }
body #md_checkout input[disabled] { opacity: 0.5; cursor: not-allowed; }

body.checkout-checkout .mfp-bg { background: var(--fie-volcanic) !important; opacity: 0.88 !important; }
.radio_container {
  background: var(--fie-deep) !important;
  border: 1px solid var(--fie-line) !important;
  color: var(--fie-cream) !important;
  font-family: var(--fie-body) !important;
  font-size: 15px;
  max-width: 560px;
  height: auto;
  max-height: 78vh;
  padding: 22px !important;
}
.radio_container .radio_search { border-bottom: 1px solid var(--fie-line) !important; padding-bottom: 14px; margin-bottom: 4px; }
.radio_container .radio_box_search {
  max-width: 100%;
  background: var(--fie-volcanic) !important;
  border: 1px solid rgba(240, 233, 220, 0.42) !important;
  color: var(--fie-cream) !important;
  font-family: var(--fie-body) !important;
  font-size: 15px;
  height: 46px;
  margin: 0 !important;
  width: 100% !important;
  padding: 10px 12px !important;
}
.radio_container .radio_box_search:focus { border-color: var(--fie-ember) !important; outline: 2px solid var(--fie-ember); outline-offset: 1px; }
.radio_container .radio_box_search::placeholder { color: var(--fie-muted); opacity: 1; }
.radio_container .radio_box { max-height: min(56vh, 420px); overflow-y: auto; scrollbar-color: var(--fie-bronze) transparent; }
.radio_container .radio_box::-webkit-scrollbar { width: 10px; }
.radio_container .radio_box::-webkit-scrollbar-thumb { background: var(--fie-bronze); }
.radio_container .radio_elements label {
  color: var(--fie-cream) !important;
  border-bottom: 1px solid var(--fie-line) !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  padding: 12px 8px !important;
  margin: 0 !important;
}
.radio_container .radio_elements label:hover, .radio_container .radio_elements label:focus-within {
  background: rgba(240, 233, 220, 0.06) !important;
  color: var(--fie-ember) !important;
}
.radio_container .radio_elements label span { color: var(--fie-muted); font-family: var(--fie-mono); font-size: 13px; }
.radio_container .radio_elements label strong { font-weight: 600; }
.radio_container .radio_elements label i { color: var(--fie-muted); font-style: normal; font-size: 13px; }
.radio_container .radio_elements input[type="radio"] { accent-color: var(--fie-ember); }
.radio_container .magnific_spin { color: var(--fie-ember); }
body.checkout-checkout .mfp-close { color: var(--fie-cream) !important; opacity: 1; font-size: 28px; }
body.checkout-checkout .mfp-close:hover { color: var(--fie-ember) !important; }
/* the terms popup (the agree link): md_checkout loads the page into an
   iframe and its own stylesheet paints the frame white with a padding
   (md-checkout.css .mfp-iframe-scaler iframe, #fff !important). The page it
   loads is dark now (catalog/controller/fie/html.php, .fie-prose-page), so
   the frame is the ground too — no white band round the text */
body.checkout-checkout .mfp-iframe-scaler iframe { background: var(--fie-volcanic) !important; }

/* -- THE THREE PAYMENT TILES -----------------------------------------
   dsk (Банка ДСК's VPOS), cod (наложен платеж), bank_transfer. The tile's
   only content is the method's mark; it is the mark that has to read, so
   the tile is the cream plate and the dark page frames it. The per-code
   background-image the OCMOD sets (and any image the admin uploads over it
   in module_md_checkout_payment_image) is untouched. ------------------- */
#md_checkout .md_payment_methods { margin: 0 -7px; }
#md_checkout .md_payment_method { margin-bottom: 14px; }
#md_checkout .md_payment_method label {
  margin-top: 0 !important;
  font-family: var(--fie-display) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
}
#md_checkout .md_payment_method label .payment_check_bgr {
  background-color: var(--fie-cream) !important;
  color: var(--fie-volcanic) !important;
  border: 1px solid var(--fie-bronze) !important;
  /* the label sits above the mark, so the box reserves three lines of
     12px/1.25 for it: the glossary's dsk title is the long one
     ("Карта (Visa, Mastercard) през Банка ДСК") and must not run into
     the logo the way a two-line box would let it */
  height: 126px;
  padding: 13px 12px 0 !important;
  line-height: 1.25;
  background-size: 124px auto !important;
  background-position: center 68px !important;
  transition: border-color 0.2s;
}
#md_checkout .md_payment_method label:hover .payment_check_bgr { border-color: var(--fie-ember) !important; }
#md_checkout .md_payment_method label input[type="radio"]:checked + span {
  border-color: var(--fie-ember) !important;
  box-shadow: inset 0 0 0 2px var(--fie-ember) !important;
}
#md_checkout .md_payment_method label input[type="radio"]:focus-visible + span { outline: 2px solid var(--fie-cream); outline-offset: 2px; }
#md_checkout .md_payment_method label input[type="radio"]:checked + div,
#md_checkout .md_payment_method label:hover div { color: var(--fie-ember) !important; }
/* the payment module's own block under the tiles (ДСК's redirect notice,
   the bank's account details) */
#md_checkout #md_payment_triger, #md_checkout #md_payment_display { color: var(--fie-cream); }
#md_checkout #md_payment_triger h1, #md_checkout #md_payment_triger h2,
#md_checkout #md_payment_triger h3, #md_checkout #md_payment_triger h4,
#md_checkout #md_payment_display h2, #md_checkout #md_payment_display h3 {
  font-family: var(--fie-display) !important;
  font-size: 17px !important;
  letter-spacing: 0.06em;
  color: var(--fie-cream) !important;
  margin: 18px 0 10px;
}
#md_checkout #payment_hidden { background: transparent !important; padding: 0 !important; }
#md_checkout .md_payment_method_terms { color: var(--fie-muted); }

/* -- THE CART COLUMN -------------------------------------------------- */
#md_checkout #md_cart table, #md_checkout table.md_table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  background: transparent !important;
}
body #md_checkout td, body #md_checkout th {
  border: 0 !important;
  border-bottom: 1px solid var(--fie-line) !important;
  padding: 12px 10px !important;
  font-size: 14px !important;
  color: var(--fie-cream) !important;
  vertical-align: middle;
}
body #md_checkout th {
  font-family: var(--fie-display) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px !important;
  color: var(--fie-muted) !important;
}
#md_checkout #md_cart td a { color: var(--fie-cream); text-decoration: none; }
#md_checkout #md_cart td a:hover { color: var(--fie-ember); }
#md_checkout #md_cart td img { width: 62px; height: auto; border: 1px solid var(--fie-line); background: var(--fie-volcanic); }
#md_checkout #md_cart td.md_text_right, #md_checkout #md_cart td.md_only_desctop {
  font-family: var(--fie-mono);
  font-variant-numeric: tabular-nums;
}
body #md_checkout input.md_qantity_input_d, body #md_checkout input.md_qantity_input_m {
  width: 52px !important;
  height: 34px;
  margin-top: 0 !important;
  padding: 4px 6px !important;
  text-align: center;
  float: left;
  font-family: var(--fie-mono) !important;
  font-size: 14px !important;
}
#md_checkout .md_btn_update, #md_checkout .md_btn_remove {
  background: transparent !important;
  border: 1px solid var(--fie-line) !important;
  height: 34px;
  padding: 4px 9px !important;
}
#md_checkout .md_btn_update { color: var(--fie-cream) !important; }
#md_checkout .md_btn_update:hover { border-color: var(--fie-ember) !important; color: var(--fie-ember) !important; }
#md_checkout .md_btn_remove { color: #e0a08a !important; }
#md_checkout .md_btn_remove:hover { border-color: #e0a08a !important; }
/* the totals: the one number that matters is the last one, in ember */
#md_checkout #md_cart_table { margin-top: 6px; }
#md_checkout #md_cart .md_totals_price { margin: 9px 0 0 0; font-size: 14px; }
/* the OCMOD splits this row 85 / 15; a mono figure needs more than 15, so
   the label gives the width back — at 85 + 30 the two wrap apart */
#md_checkout #md_cart .md_totals_price .md_totals_left {
  width: 70%;
  color: var(--fie-muted);
  font-family: var(--fie-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  padding-top: 2px;
}
#md_checkout #md_cart .md_totals_price .md_totals_left strong { font-weight: 700; }
#md_checkout #md_cart .md_totals_price .md_totals_right {
  width: 30%;
  color: var(--fie-cream);
  font-family: var(--fie-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
#md_checkout #md_cart .md_totals_price.c-total { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--fie-line); }
#md_checkout #md_cart .md_totals_price.c-total .md_totals_left { color: var(--fie-cream); font-size: 13px; padding-top: 6px; }
#md_checkout #md_cart .md_totals_price.c-total .md_totals_right { color: var(--fie-ember); font-size: 22px; }
#md_checkout .md_text_free_shipping { color: var(--fie-ember) !important; font-size: 13px; }
/* coupon / voucher / reward — the OCMOD pins them at 36 px; 44 is a target */
body #md_checkout #md_input_coupon, body #md_checkout #md_input_voucher, body #md_checkout #md_input_reward { height: 44px !important; margin-top: 14px; }
#md_checkout .md_btn_primary {
  background: transparent !important;
  color: var(--fie-cream) !important;
  border: 1px solid rgba(240, 233, 220, 0.4) !important;
  font-family: var(--fie-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px !important;
}
#md_checkout .md_btn_primary:hover { background: var(--fie-cream) !important; color: var(--fie-volcanic) !important; border-color: var(--fie-cream) !important; }
body #md_checkout #md_confirm_coupon, body #md_checkout #md_confirm_voucher, body #md_checkout #md_confirm_reward { height: 44px !important; margin-top: 14px; }
#md_checkout .md_remove { color: #e0a08a !important; border: 1px solid var(--fie-line); }

/* -- the comment, the agreement, the confirm -------------------------- */
#md_checkout #md_confirm .md_panel { background: var(--fie-deep) !important; }
#md_checkout .md_agree { margin-top: 16px; }
#md_checkout .md_agree strong[style] { color: #e0a08a !important; }
#md_checkout #md_agree_popup { font-weight: 400; color: var(--fie-cream); }
#md_checkout #md_agree_popup a { color: var(--fie-ember); }
#md_checkout .md_btn_success, #md_checkout #md_button_confirm {
  background-color: var(--fie-ember) !important;
  border-color: var(--fie-ember) !important;
  color: var(--fie-volcanic) !important;
  font-family: var(--fie-display) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 16px !important;
  padding: 14px 30px !important;
  margin: 18px 0 6px !important;
}
#md_checkout .md_btn_success:hover, #md_checkout .md_btn_success:focus,
#md_checkout #md_button_confirm:hover, #md_checkout #md_button_confirm:focus {
  background-color: var(--fie-cream) !important;
  border-color: var(--fie-cream) !important;
  color: var(--fie-volcanic) !important;
}
#md_checkout .md_btn_success[disabled], #md_checkout #md_button_confirm[disabled] { opacity: 0.45; }
#md_checkout .md_req_text { color: var(--fie-muted); font-size: 12px; margin-top: 10px; }
#md_checkout .md_req_text strong { color: #e0a08a; }
#md_checkout .md_alert, #md_checkout .md_alert_stay { color: #e0a08a !important; font-size: 14px; }
#md_checkout .md_success { color: #b9c9a0 !important; }

/* -- the login popup --------------------------------------------------
   md_checkout.js opens `.md_login_form` itself as the inline popup
   (`src: '.md_login_form'`), and magnific-popup MOVES that node out of
   #md_quick_login into .mfp-content — so these rules cannot be scoped to
   #md_quick_login, or they stop applying the moment the popup opens. */
body.checkout-checkout .md_login_form {
  background: var(--fie-deep) !important;
  border: 1px solid var(--fie-line);
  color: var(--fie-cream);
  padding: 28px;
  max-width: 380px;
  font-family: var(--fie-body) !important;
  font-size: 15px !important;
}
body.checkout-checkout .md_login_form label { color: var(--fie-muted) !important; font-weight: 400; }
body.checkout-checkout .md_login_form input[type="text"],
body.checkout-checkout .md_login_form input[type="password"] {
  background: var(--fie-volcanic) !important;
  border: 1px solid rgba(240, 233, 220, 0.42) !important;
  color: var(--fie-cream) !important;
  height: 46px;
  padding: 10px 12px !important;
  font-family: var(--fie-body) !important;
  font-size: 15px !important;
}
body.checkout-checkout .md_login_form input:focus { border-color: var(--fie-ember) !important; outline: 2px solid var(--fie-ember); outline-offset: 1px; }
body.checkout-checkout .md_login_form a { color: var(--fie-ember); }
body.checkout-checkout .md_login_form .mfp-close { color: var(--fie-cream) !important; opacity: 1; }
body.checkout-checkout .md_login_form .mfp-close:hover { color: var(--fie-ember) !important; }
body.checkout-checkout .mfp_md_login .mfp-bg { background: var(--fie-volcanic) !important; }

/* -- the phone -------------------------------------------------------- */
@media (max-width: 1150px) {
  #md_checkout .md_left_column, #md_checkout .md_right_column { padding-left: 0; padding-right: 0; }
  #md_checkout .md_container { margin: 0 auto 48px !important; }
}
@media (max-width: 768px) {
  body #md_checkout h1.md_left { font-size: 30px !important; text-align: left !important; }
  #md_checkout .md_panel_body { padding: 18px 14px !important; }
  #md_checkout #md_cart .md_panel_body { padding: 6px 14px 18px !important; }
  #md_checkout .md_shipping_method label .md_shipping_method_icon { width: 54px !important; min-width: 54px; background-size: 26px auto !important; }
  #md_checkout .md_shipping_method label .md_shipping_method_title { padding: 12px 12px !important; font-size: 14px; }
  #md_checkout .md_shipping_method label .md_shipping_method_price { width: 92px !important; min-width: 92px; padding: 12px 12px !important; font-size: 13px; }
  #md_checkout .md_btn_clear { width: 100%; margin: 8px 0 0 !important; }
  #md_checkout .md_btn_success, #md_checkout #md_button_confirm { width: 100%; }
  /* the OCMOD unfloats .md_right below 768, so the office-map link lands
     against the panel's own title ("ОФИС КАРТА НА ОФИСИТЕ"). Width, not
     display: the element's `display` is the template's conditional (it is
     inline-block or none depending on whether an office is already
     chosen, and the module's JS toggles it) and must not be overridden. */
  #md_checkout #md_econt_map { width: 100%; margin-top: 8px; }
  .radio_container { max-width: 100%; margin: 12px auto !important; padding: 18px 16px !important; }
  #md_checkout #md_cart .md_totals_price .md_totals_left { width: 68%; }
  #md_checkout #md_cart .md_totals_price .md_totals_right { width: 32%; }
}
@media (max-width: 480px) {
  #md_checkout .md_payment_method { width: 100% !important; float: none; }
  /* one tile per row: the label fits on one or two lines, so the mark comes up */
  #md_checkout .md_payment_method label .payment_check_bgr { height: 104px; background-position: center 48px !important; }
}

/* -- FOCUS, VISIBLE (round 38 §1c) ------------------------------------
   The shop's theme takes every outline away (tt_zonan2's stylesheet:
   `*:focus { outline: none !important }`) and Bootstrap draws a button's
   ring inside the button, over its gold: on OpenCart's pages a keyboard
   user saw no focus on the breadcrumb, the buttons, the checkboxes or the
   footer's cookie button (scripts/measure/contrast-states.mjs: 1.00:1, "no
   visible change on focus"; 1.11 on the gold). Here focus shows as it
   does on the storefront: an ember ring outside the element, on the dark
   ground (7.87:1). The ID in :not() lifts the rule over any class-level
   rule of the theme's; a click shows nothing (:focus-visible only).
   md_checkout's options keep their own ring on the tile, so their hidden
   radios are left out. */
:focus-visible:not(#fie-focus) {
  outline: 2px solid var(--fie-ember) !important;
  outline-offset: 3px !important;
}
#md_checkout .md_shipping_method label input[type="radio"]:focus-visible,
#md_checkout .md_payment_method label input[type="radio"]:focus-visible {
  outline: none !important;
}

/* Where the ring still did not show (round 38, contrast-states.mjs on :8080):
   - the forms' button row (the theme's .buttons) clips what reaches past it
     (overflow: hidden, to hold its floated buttons): it holds them with
     flow-root instead, and the ring outside the button shows;
   - a link wrapping onto a second line inside running text drew its ring
     over the neighbouring lines' letters: closer to the words there;
   - the checkout's product picture is an inline link around an image, its
     ring drawn round the line box behind the picture: a block round it. */
.buttons { overflow: visible !important; display: flow-root; }
:is(p, li, td, dd, label) > a:focus-visible:not(#fie-focus) { outline-offset: 1px !important; }
#md_checkout #md_cart td a:has(> img) { display: inline-block; }

/* The selected delivery's price clear of the ember square in the tile's
   corner (the tick is 20 px; the price's «€» ran under it: 1.95:1) */
#md_checkout .md_shipping_method label .md_shipping_method_price { padding-right: 28px !important; }