/*
 * Cookie consent banner and preferences modal (js/default/consent_v2.js),
 * loaded site-wide from templates/core/metaheader.php.
 * Sits above the header (1010), the basket bar and the mobile bottom nav
 * (both 1000); 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;
   bottom: calc(16px + env(safe-area-inset-bottom, 0px));
   z-index: 1050;
   max-height: calc(100vh - 32px);
   overflow: auto;
   padding: 20px;
   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;
}

.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 + env(safe-area-inset-bottom, 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;
   }
}