/*
 * Cookie consent banner and preferences modal (js/default/consent_v2.js),
 * loaded site-wide from templates/core/metaheader.php.
 * Sits above the header (1010) and the mobile bottom nav (1000), and is
 * lifted clear of fixed bottom action bars by the script; the modal sits
 * above UIkit modals and the basket confirm (1100).
 * Reject all uses the plain style in the banner (Accept all is solid).
 */

/* ------------------------------------------------------------------ */
/* Shared                                                              */
/* ------------------------------------------------------------------ */
.ssc-banner,
.ssc-dialog {
   box-sizing: border-box;
   font-family: inherit;
   color: #4A4F63;
   text-align: left;
}

.ssc-banner *,
.ssc-dialog * {
   box-sizing: border-box;
}

.ssc-title {
   margin: 0 0 6px;
   font-family: inherit;
   font-size: 17px;
   font-weight: 700;
   line-height: 1.3;
   color: #14183A;
   text-transform: none;
   letter-spacing: 0;
}

.ssc-text {
   margin: 0;
   font-size: 14px;
   line-height: 1.55;
   color: #4A4F63;
}

.ssc-link {
   color: #14183A;
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 2px;
}

.ssc-link:hover,
.ssc-link:focus {
   color: #14183A;
   text-decoration: none;
}

.ssc-actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
   margin-top: 16px;
}

.ssc-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 44px;
   margin: 0;
   padding: 0 18px;
   border: 1.5px solid #14183A;
   border-radius: 999px;
   font-family: inherit;
   font-size: 15px;
   font-weight: 600;
   line-height: 1.2;
   white-space: nowrap;
   cursor: pointer;
   transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ssc-btn-solid {
   background: #14183A;
   color: #fff;
}

.ssc-btn-solid:hover {
   background: #262B57;
   border-color: #262B57;
}

.ssc-btn-plain {
   border-color: #E4E8F0;
   background: #fff;
   color: #14183A;
}

.ssc-btn-plain:hover {
   border-color: #14183A;
}

.ssc-btn:focus-visible,
.ssc-close:focus-visible,
.ssc-link:focus-visible,
.ssc-switch:focus-visible {
   outline: 2px solid #14183A;
   outline-offset: 2px;
}

.ssc-banner .ssc-btn-manage {
   grid-column: 1 / -1;
}

/* ------------------------------------------------------------------ */
/* Banner                                                              */
/* ------------------------------------------------------------------ */
.ssc-banner {
   position: fixed;
   left: 16px;
   right: 16px;
   /* --ssc-bottom-offset is the height of a visible fixed bottom action bar
      (basket Checkout, product buy bar, business order bar), set by the
      script so the banner sits above the bar instead of covering it. The
      bar already includes the safe area, so the larger of the two wins. */
   bottom: calc(16px + var(--ssc-bottom-offset, 0px));
   bottom: calc(16px + max(var(--ssc-bottom-offset, 0px), env(safe-area-inset-bottom, 0px)));
   z-index: 1050;
   max-height: calc(100vh - 32px - var(--ssc-bottom-offset, 0px));
   max-height: calc(100dvh - 32px - var(--ssc-bottom-offset, 0px));
   overflow: auto;
   padding: 16px;
   border: 1px solid #E4E8F0;
   border-radius: 20px;
   background: #fff;
   box-shadow: 0 12px 32px rgba(20, 24, 58, 0.14);
   opacity: 0;
   transform: translateY(16px);
   transition: opacity .2s ease, transform .2s ease, bottom .2s ease;
}

@media (max-width: 639px) {
   .ssc-banner .ssc-text {
      font-size: 13.5px;
      line-height: 1.5;
   }

   .ssc-banner .ssc-actions {
      margin-top: 12px;
   }
}

.ssc-banner[hidden] {
   display: none;
}

.ssc-banner.is-on {
   opacity: 1;
   transform: none;
}

@media (min-width: 640px) {
   .ssc-banner {
      left: 24px;
      right: auto;
      bottom: calc(24px + var(--ssc-bottom-offset, 0px));
      bottom: calc(24px + max(var(--ssc-bottom-offset, 0px), env(safe-area-inset-bottom, 0px)));
      max-height: calc(100vh - 48px - var(--ssc-bottom-offset, 0px));
      max-height: calc(100dvh - 48px - var(--ssc-bottom-offset, 0px));
      width: 560px;
      max-width: calc(100% - 48px);
      padding: 24px;
   }

   .ssc-banner .ssc-actions {
      grid-template-columns: 1fr 1fr auto;
   }

   .ssc-banner .ssc-btn-manage {
      grid-column: auto;
   }
}

/* ------------------------------------------------------------------ */
/* Preferences modal                                                   */
/* ------------------------------------------------------------------ */
html.ssc-modal-open {
   overflow: hidden;
}

.ssc-modal {
   position: fixed;
   inset: 0;
   z-index: 1150;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 16px;
}

.ssc-modal[hidden] {
   display: none;
}

.ssc-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(20, 24, 58, 0.45);
   opacity: 0;
   transition: opacity .2s ease;
}

.ssc-dialog {
   position: relative;
   width: 100%;
   max-width: 520px;
   max-height: calc(100vh - 32px);
   overflow: auto;
   padding: 28px 24px 24px;
   border-radius: 20px;
   background: #fff;
   box-shadow: 0 24px 64px rgba(20, 24, 58, 0.24);
   opacity: 0;
   transform: translateY(12px);
   transition: opacity .2s ease, transform .2s ease;
}

.ssc-dialog:focus {
   outline: none;
}

.ssc-modal.is-open .ssc-backdrop,
.ssc-modal.is-open .ssc-dialog {
   opacity: 1;
   transform: none;
}

.ssc-dialog .ssc-title {
   padding-right: 40px;
   font-size: 20px;
}

.ssc-close {
   position: absolute;
   top: 16px;
   right: 16px;
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background: #F3F5F9;
   color: #14183A;
   cursor: pointer;
}

.ssc-close:hover {
   background: #E4E8F0;
}

.ssc-rows {
   margin-top: 16px;
   border-top: 1px solid #EEF0F4;
}

.ssc-row {
   padding: 14px 0;
   border-bottom: 1px solid #EEF0F4;
}

.ssc-row-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
}

.ssc-row-name {
   font-size: 15px;
   font-weight: 700;
   color: #14183A;
   cursor: pointer;
}

.ssc-row-text {
   margin: 4px 0 0;
   padding-right: 60px;
   font-size: 13.5px;
   line-height: 1.5;
   color: #5B6178;
}

/* Toggle switch: a real checkbox with role="switch" */
.ssc-switch {
   -webkit-appearance: none;
   appearance: none;
   flex: 0 0 auto;
   position: relative;
   width: 46px;
   height: 26px;
   margin: 0;
   border: 0;
   border-radius: 999px;
   background: #D5DAE5;
   cursor: pointer;
   transition: background-color .15s ease;
}

.ssc-switch::after {
   content: "";
   position: absolute;
   top: 3px;
   left: 3px;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: #fff;
   box-shadow: 0 1px 3px rgba(20, 24, 58, 0.25);
   transition: transform .15s ease;
}

.ssc-switch:checked {
   background: #14183A;
}

.ssc-switch:checked::after {
   transform: translateX(20px);
}

.ssc-switch:disabled {
   opacity: .45;
   cursor: not-allowed;
}

.ssc-actions-modal {
   grid-template-columns: 1fr 1fr;
   margin-top: 20px;
}

.ssc-actions-modal .ssc-btn-save {
   grid-column: 1 / -1;
}

@media (min-width: 640px) {
   .ssc-dialog {
      padding: 32px 28px 28px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .ssc-banner,
   .ssc-backdrop,
   .ssc-dialog,
   .ssc-switch,
   .ssc-switch::after,
   .ssc-btn {
      transition: none;
   }

   .ssc-banner,
   .ssc-dialog {
      transform: none;
   }
}