/* Mystic Juice checkout v2 — OpenCart 4.1.0.4, Journal 3.2.10, Worldpay Access.
   Scoped to #checkout-checkout and OpenCart's checkout selection modals.
   Visual styles only. No payment, validation, order or checkout logic changes.
   Installed in the same path as v1, already linked by the v1 header.twig patch. */

html.route-checkout-checkout {
  --mj-navy: #252c3d;
  --mj-card: #303a4d;
  --mj-card-deep: #20283a;
  --mj-border: #536078;
  --mj-gold: #d5ad65;
  --mj-gold-light: #f0d3a0;
  --mj-white: #f7f8fb;
  --mj-muted: #c4cbd7;
}

/* Real OC4 checkout markup: #checkout-checkout > #content > .checkout-sections */
html.route-checkout-checkout #checkout-checkout {
  width: min(100% - 36px, 1320px) !important;
  max-width: 1320px !important;
  margin: 28px auto 56px !important;
  padding: 0 !important;
  color: var(--mj-white);
}
html.route-checkout-checkout #checkout-checkout > .row,
html.route-checkout-checkout #checkout-checkout #content {
  width: 100%; margin: 0; padding: 0; min-width: 0; max-width: none;
}
html.route-checkout-checkout #checkout-checkout .checkout-sections {
  display: grid !important;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  align-items: start;
  gap: clamp(18px, 2.6vw, 36px);
  margin: 0 !important;
}
html.route-checkout-checkout #checkout-checkout .checkout-sections > .checkout-section {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: initial !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  background: transparent;
}

/* Native OC4 stage cards; these exact IDs exist in the saved checkout. */
html.route-checkout-checkout #checkout-shipping-address,
html.route-checkout-checkout #checkout-shipping-method,
html.route-checkout-checkout #checkout-payment-method,
html.route-checkout-checkout #checkout-confirm,
html.route-checkout-checkout #checkout-payment {
  min-width: 0;
  margin: 0 0 20px !important;
  padding: clamp(17px, 2vw, 26px) !important;
  border: 1px solid var(--mj-border) !important;
  border-radius: 12px !important;
  background: var(--mj-card) !important;
  box-shadow: 0 10px 30px rgb(0 0 0 / 13%);
  box-sizing: border-box;
}
html.route-checkout-checkout #checkout-checkout fieldset { margin: 0; min-width: 0; }
html.route-checkout-checkout #checkout-checkout legend {
  display: block; float: none;
  width: 100%; margin: 0 0 20px; padding: 0 0 13px;
  font-family: inherit; color: var(--mj-gold-light) !important;
  border: 0; border-bottom: 1px solid var(--mj-border);
  font-weight: 750; font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.4; letter-spacing: .02em; text-transform: none;
}
html.route-checkout-checkout #checkout-checkout label,
html.route-checkout-checkout #checkout-checkout .form-label {
  color: var(--mj-white) !important; font-size: 14px; line-height: 1.45;
}
html.route-checkout-checkout #checkout-checkout .form-check {
  position: relative; display: flex; align-items: center;
  margin: 0 0 9px !important; padding: 10px 14px !important;
  border: 1px solid var(--mj-border); border-radius: 8px;
  background: rgb(255 255 255 / 4%);
  min-height: 45px; box-sizing: border-box;
}
html.route-checkout-checkout #checkout-checkout .form-check-input {
  position: static !important; float: none !important;
  flex: 0 0 17px; width: 17px; height: 17px;
  margin: 0 12px 0 0 !important;
  accent-color: var(--mj-gold);
}
html.route-checkout-checkout #checkout-checkout .form-check-label {
  margin: 0; cursor: pointer; font-weight: 500;
}
html.route-checkout-checkout #checkout-checkout .form-control,
html.route-checkout-checkout #checkout-checkout .form-select {
  display: block; width: 100%; min-width: 0;
  min-height: 45px; padding: 10px 13px;
  border: 1px solid #9ea9ba !important; border-radius: 7px !important;
  background-color: #fff !important; color: #202839 !important;
  font-family: inherit; font-size: 14px; line-height: 1.5;
  box-shadow: none !important; box-sizing: border-box;
}
html.route-checkout-checkout #checkout-checkout .form-control:focus,
html.route-checkout-checkout #checkout-checkout .form-select:focus {
  outline: 2px solid var(--mj-gold); outline-offset: 1px;
  border-color: var(--mj-gold) !important;
}
html.route-checkout-checkout #checkout-checkout textarea.form-control { min-height: 92px; resize: vertical; }
html.route-checkout-checkout #checkout-checkout #shipping-existing { margin-top: 14px; }
html.route-checkout-checkout #checkout-checkout #shipping-existing select { max-width: 100%; }
html.route-checkout-checkout #checkout-checkout .form-group { min-width: 0; }
html.route-checkout-checkout #checkout-checkout .invalid-feedback { color: #ffadb1; }

/* Shipping/Payment OC4 read-only fields with their real "Choose" action. */
html.route-checkout-checkout #checkout-shipping-method .input-group,
html.route-checkout-checkout #checkout-payment-method .input-group {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  width: 100%; gap: 0;
  align-items: stretch;
}
html.route-checkout-checkout #checkout-shipping-method .input-group-text,
html.route-checkout-checkout #checkout-payment-method .input-group-text {
  display: flex !important; align-items: center; justify-content: center;
  min-width: 0; color: var(--mj-gold); background: var(--mj-card-deep);
  border: 1px solid var(--mj-border); border-right: 0;
  border-radius: 7px 0 0 7px;
}
html.route-checkout-checkout #input-shipping-method,
html.route-checkout-checkout #input-payment-method {
  border-radius: 0 !important; min-width: 0; text-overflow: ellipsis;
  font-weight: 600; cursor: default;
}
html.route-checkout-checkout #checkout-shipping-method .input-group > .btn,
html.route-checkout-checkout #checkout-payment-method .input-group > .btn {
  margin: 0 !important; min-width: 96px !important;
  border-radius: 0 7px 7px 0 !important;
}

/* Consistent visible checkout buttons without altering onclick handlers. */
html.route-checkout-checkout #checkout-checkout .btn.btn-primary {
  min-height: 45px; padding: 11px 18px !important;
  color: #202839 !important; font-weight: 800 !important;
  text-transform: none; letter-spacing: .015em;
  border: 1px solid var(--mj-gold) !important;
  border-radius: 7px; background: var(--mj-gold) !important;
  box-shadow: none; transition: background .15s ease, transform .15s ease;
}
html.route-checkout-checkout #checkout-checkout .btn.btn-primary:hover { background: var(--mj-gold-light) !important; }
html.route-checkout-checkout #checkout-checkout .btn.btn-primary:focus-visible { outline: 3px solid white; outline-offset: 3px; }

/* Order summary: fix inherited white subtotal background and clipped columns. */
html.route-checkout-checkout #checkout-confirm {
  overflow: hidden; padding: 0 !important;
}
html.route-checkout-checkout #checkout-confirm .table-responsive { margin: 0; overflow-x: auto; }
html.route-checkout-checkout #checkout-confirm table {
  width: 100%; margin: 0 !important; border: 0 !important;
  border-collapse: collapse; background: transparent !important;
  color: var(--mj-white) !important; font-size: 14px;
}
html.route-checkout-checkout #checkout-confirm table tr,
html.route-checkout-checkout #checkout-confirm table td,
html.route-checkout-checkout #checkout-confirm table th {
  border-color: var(--mj-border) !important;
  background: transparent !important; color: var(--mj-white) !important;
}
html.route-checkout-checkout #checkout-confirm table td,
html.route-checkout-checkout #checkout-confirm table th { padding: 12px 15px !important; vertical-align: middle; }
html.route-checkout-checkout #checkout-confirm table thead th,
html.route-checkout-checkout #checkout-confirm table thead td {
  font-weight: 800 !important; font-size: 12px;
  text-transform: uppercase; letter-spacing: .065em;
  color: var(--mj-gold-light) !important;
  background: var(--mj-card-deep) !important;
}
html.route-checkout-checkout #checkout-confirm table tfoot td,
html.route-checkout-checkout #checkout-confirm table tfoot th { background: rgb(255 255 255 / 3%) !important; }
html.route-checkout-checkout #checkout-confirm table tfoot tr:last-child td,
html.route-checkout-checkout #checkout-confirm table tfoot tr:last-child th {
  color: var(--mj-gold-light) !important; font-weight: 800 !important;
  background: var(--mj-card-deep) !important; font-size: 17px;
}
html.route-checkout-checkout #checkout-confirm .checkout-cart-item,
html.route-checkout-checkout #checkout-confirm .checkout-cart-item a { color: var(--mj-white) !important; }
html.route-checkout-checkout #checkout-confirm .checkout-cart-item small { color: var(--mj-muted) !important; }

/* Worldpay rendered by JS INSIDE #checkout-payment; its stylesheet loads later.
   Rules deliberately use high specificity / !important for the outer form only.
   Worldpay-hosted PAN / expiry / CVC iframe internals are not modified. */
html.route-checkout-checkout #checkout-payment { padding: 0 !important; }
html.route-checkout-checkout #checkout-payment #access_worldpay_checkout-payment-form-container {
  width: 100% !important; max-width: none !important;
  margin: 0 !important; padding: clamp(18px, 2vw, 27px) !important;
  border: 0 !important; border-radius: 12px !important;
  background: transparent !important; color: var(--mj-white) !important;
  box-shadow: none !important; box-sizing: border-box;
}
html.route-checkout-checkout #access_worldpay_checkout-payment-form-container .row.justify-content-center {
  display: flex !important; flex-wrap: wrap; align-items: center;
  justify-content: center !important; gap: 12px !important;
  padding-bottom: 17px; margin: 0 0 18px !important;
  border-bottom: 1px solid var(--mj-border);
}
html.route-checkout-checkout #access_worldpay_checkout-payment-form-container .row.justify-content-center > .col-auto {
  display: flex !important; align-items: center; justify-content: center;
  flex: 0 0 auto !important; width: auto !important;
  padding: 0 !important; margin: 0 !important;
}
html.route-checkout-checkout #access_worldpay_checkout-payment-form-container .row.justify-content-center img {
  width: auto !important; max-width: 76px !important;
  height: 27px !important; margin: 0 !important;
  object-fit: contain !important;
}
html.route-checkout-checkout #access_worldpay_checkout-payment-form-container .text-danger {
  display: block; width: 100%; margin-bottom: 20px !important;
  padding: 11px 14px; border-radius: 7px;
  color: #f3c7cb !important; background: rgb(200 65 75 / 14%);
}
html.route-checkout-checkout #access_worldpay_checkout-payment-form-container .text-danger p { margin: 0; }
html.route-checkout-checkout #access_worldpay_checkout-payment-form-container .row.row-cols-1 { margin: 0 !important; }
html.route-checkout-checkout #access_worldpay_checkout-payment-form {
  display: block; width: 100%; min-width: 0; margin: 0; padding: 0;
}
html.route-checkout-checkout #access_worldpay_checkout-payment-form .label {
  display: block; margin: 0 0 8px !important;
  color: var(--mj-white) !important; font-size: 14px; font-weight: 700;
  letter-spacing: 0; line-height: 1.4;
}
html.route-checkout-checkout #access_worldpay_checkout-payment-form .field {
  width: 100% !important; height: 48px !important; min-width: 0;
  margin: 0 0 19px !important; padding: 0 !important;
  border: 1px solid #9ea9ba !important; border-radius: 7px !important;
  background: #fff !important; box-sizing: border-box;
}
html.route-checkout-checkout #access_worldpay_checkout-payment-form .field.is-onfocus {
  outline: 2px solid var(--mj-gold); border-color: var(--mj-gold) !important;
}
html.route-checkout-checkout #access_worldpay_checkout-payment-form .field.is-invalid { border-color: #e8737b !important; }
html.route-checkout-checkout #access_worldpay_checkout-payment-form .row.row-cols-2 {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 !important; column-gap: 18px !important; row-gap: 0;
}
html.route-checkout-checkout #access_worldpay_checkout-payment-form .row.row-cols-2 > * {
  width: auto !important; max-width: none !important; padding: 0 !important;
  margin: 0 !important; min-width: 0;
}
html.route-checkout-checkout #access_worldpay_checkout-payment-form #access_worldpay_checkout-card-holder-name {
  display: block; width: 100% !important; height: 48px !important;
  padding: 11px 14px !important; margin: 0 !important;
  border: 1px solid #9ea9ba !important; border-radius: 7px !important;
  background: #fff !important; color: #202839 !important;
  font-size: 15px !important; font-weight: 500 !important; letter-spacing: normal !important;
}
html.route-checkout-checkout #access_worldpay_checkout-payment-form #access_worldpay_checkout-card-holder-name::placeholder {
  color: #596374 !important; letter-spacing: 0 !important; text-transform: none !important;
}
html.route-checkout-checkout #checkout-payment > .text-end {
  display: flex; justify-content: flex-end; padding: 0 25px 25px; margin: 0 !important;
}
html.route-checkout-checkout #access_worldpay_checkout-button-confirm {
  width: min(100%, 280px); min-height: 51px; margin: 0 !important;
  font-size: 15px; text-transform: none;
}

/* OpenCart's dynamically created shipping/payment selectors. Styling only. */
html.route-checkout-checkout #modal-shipping .modal-content,
html.route-checkout-checkout #modal-payment .modal-content {
  border: 1px solid var(--mj-border); border-radius: 12px;
  background: var(--mj-card); color: var(--mj-white);
}
html.route-checkout-checkout #modal-shipping .modal-header,
html.route-checkout-checkout #modal-payment .modal-header { border-color: var(--mj-border); }
html.route-checkout-checkout #modal-shipping .modal-title,
html.route-checkout-checkout #modal-payment .modal-title { color: var(--mj-gold-light); }
html.route-checkout-checkout #modal-shipping label,
html.route-checkout-checkout #modal-payment label { color: var(--mj-white); }
html.route-checkout-checkout #modal-shipping .btn-primary,
html.route-checkout-checkout #modal-payment .btn-primary { background: var(--mj-gold); color: #202839; border: 0; }

@media (max-width: 980px) {
  html.route-checkout-checkout #checkout-checkout { width: min(100% - 26px, 780px) !important; margin-top: 16px !important; }
  html.route-checkout-checkout #checkout-checkout .checkout-sections { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 560px) {
  html.route-checkout-checkout #checkout-checkout { width: calc(100% - 20px) !important; }
  html.route-checkout-checkout #checkout-shipping-address,
  html.route-checkout-checkout #checkout-shipping-method,
  html.route-checkout-checkout #checkout-payment-method { padding: 16px !important; }
  html.route-checkout-checkout #checkout-shipping-method .input-group,
  html.route-checkout-checkout #checkout-payment-method .input-group { grid-template-columns: 38px minmax(0, 1fr) auto; }
  html.route-checkout-checkout #checkout-shipping-method .input-group > .btn,
  html.route-checkout-checkout #checkout-payment-method .input-group > .btn { min-width: 72px !important; padding: 8px 10px !important; }
  html.route-checkout-checkout #access_worldpay_checkout-payment-form .row.row-cols-2 { grid-template-columns: 1fr; }
  html.route-checkout-checkout #checkout-payment > .text-end { padding: 0 16px 18px; }
  html.route-checkout-checkout #access_worldpay_checkout-button-confirm { width: 100%; }
  html.route-checkout-checkout #checkout-confirm table td,
  html.route-checkout-checkout #checkout-confirm table th { padding: 9px 10px !important; }
}


/* V3: place methods and customer comments under the shipping address.
   The second OpenCart column becomes display:contents, retaining its child
   elements (and all their event handlers) instead of moving payment nodes. */
@media (min-width: 981px) {
 html.route-checkout-checkout #checkout-checkout .checkout-sections {
   grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
   column-gap: 28px !important; row-gap: 0 !important;
 }
 html.route-checkout-checkout #checkout-checkout .checkout-sections > .checkout-section-start {
   grid-column: 1 !important; grid-row: 1 !important; align-self: start;
 }
 html.route-checkout-checkout #checkout-checkout .checkout-sections > .checkout-section-end {
   display: contents !important;
 }
 html.route-checkout-checkout #checkout-checkout .checkout-sections > .checkout-section-end > #checkout-shipping-method {
   grid-column: 1 !important; grid-row: 2 !important; align-self: start;
 }
 html.route-checkout-checkout #checkout-checkout .checkout-sections > .checkout-section-end > #checkout-payment-method {
   grid-column: 1 !important; grid-row: 3 !important; align-self: start;
 }
 html.route-checkout-checkout #checkout-checkout .checkout-sections > .checkout-section-end > #checkout-confirm {
   grid-column: 2 !important; grid-row: 1 / span 3 !important; align-self: start;
 }
}
@media (max-width: 980px) {
 html.route-checkout-checkout #checkout-checkout .checkout-sections > .checkout-section-end {
   display: contents !important;
 }
 html.route-checkout-checkout #checkout-checkout .checkout-sections > .checkout-section-start { grid-column: 1; grid-row: 1; }
 html.route-checkout-checkout #checkout-checkout .checkout-sections > .checkout-section-end > #checkout-shipping-method { grid-column: 1; grid-row: 2; }
 html.route-checkout-checkout #checkout-checkout .checkout-sections > .checkout-section-end > #checkout-payment-method { grid-column: 1; grid-row: 3; }
 html.route-checkout-checkout #checkout-checkout .checkout-sections > .checkout-section-end > #checkout-confirm { grid-column: 1; grid-row: 4; }
}
/* Hide the default text input + Choose button only AFTER the functional
   replacement select is present. Don't hide hidden codes or other controls. */
html.route-checkout-checkout #checkout-shipping-method.mj-select-ready > fieldset > .input-group,
html.route-checkout-checkout #checkout-payment-method.mj-select-ready > fieldset > .input-group {
 display: none !important;
}
html.route-checkout-checkout #checkout-checkout .mj-method-select {
 appearance: auto !important; display: block !important;
 width: 100% !important; min-height: 48px !important;
 padding: 10px 14px !important; border-radius: 8px !important;
 border: 1px solid #bfa16d !important;
 background: #fdfdfd !important; color: #1f2937 !important;
 font-size: 15px !important; cursor: pointer;
}
html.route-checkout-checkout #checkout-checkout .mj-method-select:focus {
 outline: 2px solid #d5ad65 !important; outline-offset: 2px;
}
html.route-checkout-checkout #checkout-checkout .mj-method-select:disabled { opacity: .7; cursor: progress; }
html.route-checkout-checkout #checkout-checkout .mj-method-error {
 margin-top: 8px; padding: 9px 12px; background: #6b2429;
 color: white; border: 1px solid #e1888d; border-radius: 6px;
}