/* Life Oils styling for the Silktide Consent Manager.
   Deep green panel, cream copy, the same yellow the shop uses for its calls to
   action. Accepting and refusing are both solid buttons of the same size, in
   the same place, because a refusal has to be as easy as an agreement. */

#stcm-wrapper {
 --lo-green:#091808;
 --lo-cream:#FFF7E8;
 --lo-yellow:#FDE738;

 --fontFamily:"LO Poppins","Poppins",-apple-system,"Segoe UI",sans-serif;
 --primaryColor:var(--lo-yellow);
 --backgroundColor:var(--lo-green);
 --textColor:var(--lo-cream);
 --iconColor:var(--lo-cream);
 --iconBackgroundColor:var(--lo-green);
 --backdropBackgroundColor:rgba(9,24,8,.55);
 --backdropBackgroundBlur:4px;
 --boxShadow:0 18px 48px rgba(9,24,8,.28);
}

#stcm-banner,
#stcm-modal {
 border-radius:12px;
 box-shadow:var(--boxShadow);
}

#stcm-banner p,
#stcm-modal p {
 font-size:15px;
 line-height:1.6;
}

#stcm-modal h1,
#stcm-modal legend {
 font-family:"LO Playfair","Playfair Display",Georgia,serif;
 letter-spacing:.01em;
}

#stcm-modal h1 {
 font-size:26px;
}

/* Links keep the shop's underline-on-cream treatment. */
#stcm-wrapper a {
 color:var(--lo-cream);
 text-decoration:underline;
 text-underline-offset:3px;
}
#stcm-wrapper a:hover {
 color:var(--lo-yellow);
}

/* Both answers are solid buttons of equal weight. */
#stcm-wrapper .stcm-button {
 font-family:"LO Playfair","Playfair Display",Georgia,serif;
 font-weight:700;
 font-size:16px;
 border-radius:999px;
 padding:13px 28px;
 min-height:48px;
 transition:background-color 220ms ease,color 220ms ease,border-color 220ms ease;
}
#stcm-wrapper .stcm-button-primary {
 background-color:var(--lo-yellow);
 border-color:var(--lo-yellow);
 color:var(--lo-green);
}
#stcm-wrapper .stcm-button-primary:hover {
 background-color:var(--lo-cream);
 border-color:var(--lo-cream);
 color:var(--lo-green);
}
/* Refusing is the same size and sits in the same row as accepting; only the
   fill differs, so the two answers stay equally easy to find and to press. */
#stcm-wrapper .stcm-reject-all,
#stcm-wrapper .stcm-button-secondary,
#stcm-wrapper .stcm-modal-reject-all {
 background-color:var(--lo-cream);
 border-color:var(--lo-cream);
 color:var(--lo-green);
}
#stcm-wrapper .stcm-reject-all:hover,
#stcm-wrapper .stcm-button-secondary:hover,
#stcm-wrapper .stcm-modal-reject-all:hover {
 background-color:var(--lo-yellow);
 border-color:var(--lo-yellow);
 color:var(--lo-green);
}

/* Attribution stays in the preferences modal; the banner itself is the shop's. */
#stcm-banner .stcm-logo {
 display:none;
}

/* "Choose" sits beside the two answers rather than hiding under them. */
#stcm-banner .stcm-preferences-button span {
 font-family:"LO Poppins","Poppins",sans-serif;
 font-size:15px;
 color:var(--lo-cream);
 text-underline-offset:3px;
}
#stcm-banner .stcm-preferences-button span:hover {
 color:var(--lo-yellow);
}

#stcm-wrapper a:focus,
#stcm-wrapper #stcm-banner button:focus,
#stcm-wrapper #stcm-modal button:focus,
#stcm-wrapper #stcm-icon:focus {
 outline:2px solid var(--lo-yellow);
 outline-offset:3px;
}

/* Toggles read as the shop's yellow when a category is on. */
#stcm-modal .stcm-toggle input:checked + .stcm-toggle-track {
 background-color:var(--lo-yellow);
}
#stcm-modal .stcm-toggle input:checked ~ .stcm-toggle-on {
 color:var(--lo-green);
}

/* No floating button. The footer menu carries the link instead, so nothing
   sits over the page after a visitor has answered. */
#stcm-wrapper #stcm-icon { display:none !important; }

#stcm-modal footer a.stcm-credit-link {
 opacity:.6;
 font-size:12px;
}

/* The footer menu item that reopens the choices. */
#brx-footer .lo-cookie-settings-link > a,
#brx-footer li.lo-cookie-settings-link a {
 color:#ffffff;
 text-decoration:underline;
 text-underline-offset:3px;
}

/* [lo_cookie_settings] renders an inline text button anywhere in the site. */
.lo-cookie-settings {
 background:none;
 border:0;
 padding:0;
 font:inherit;
 color:inherit;
 text-decoration:underline;
 text-underline-offset:3px;
 cursor:pointer;
}
.lo-cookie-settings:hover {
 color:#FDE738;
}

@media(prefers-reduced-motion:reduce){
 #stcm-banner { animation:none; }
 #stcm-wrapper .stcm-button { transition:none; }
}