/* BigCommerce-specific additions to the Kalles CSS (lead-owned). */

/* ---- Cornerstone/Foundation reveal modals (#modal, #alert-modal): hidden until opened, Kalles popup look ---- */
.modal { display: none; position: fixed; z-index: 1005; top: 50% !important; left: 50%; transform: translate(-50%, -50%);
    width: calc(100% - 30px); max-width: 600px; max-height: 90vh; overflow: auto; background: #fff; color: var(--text-color);
    padding: 30px; box-shadow: 0 0 20px rgba(0, 0, 0, .15); outline: 0; }
.modal.open, .modal[style*="display: block"] { display: block; }
.modal--small { max-width: 420px; }
.reveal-overlay, .modal-background, .reveal-modal-bg { display: none; position: fixed; inset: 0; z-index: 1004; background: rgba(0, 0, 0, .7); }
.reveal-overlay[style*="display: block"], .modal-background.is-open, .modal-background[style*="display: block"], .reveal-modal-bg[style*="display: block"] { display: block; }
.modal-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: inline-flex; align-items: center;
    justify-content: center; color: var(--t4s-dark-color); font-size: 22px; line-height: 1; text-decoration: none; background: none; border: 0; }
.modal-close .aria-description--hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.modal .loadingOverlay { display: none; }

/* Alert modal (cart/product errors) */
#alert-modal { text-align: center; }
#alert-modal .alert-icon { display: none; }
#alert-modal.modal--error .error-icon, #alert-modal.modal--warning .warning-icon { display: inline-flex; }
#alert-modal .alert-icon { width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--t4s-error-color);
    color: var(--t4s-error-color); align-items: center; justify-content: center; font-size: 34px; font-weight: 600; margin-bottom: 15px; position: relative; }
#alert-modal .error-icon .line { position: absolute; width: 30px; height: 3px; background: currentColor; top: 50%; left: 50%; }
#alert-modal .error-icon .line-left { transform: translate(-50%, -50%) rotate(45deg); }
#alert-modal .error-icon .line-right { transform: translate(-50%, -50%) rotate(-45deg); }
#alert-modal .warning-icon { border-color: var(--t4s-warning-color); color: var(--t4s-warning-color); }
#alert-modal .modal-content { color: var(--t4s-dark-color); font-size: 15px; margin-bottom: 20px; }
#alert-modal .button-container { display: flex; gap: 10px; justify-content: center; }
#alert-modal .button { min-width: 100px; height: 40px; padding: 0 20px; border: 0; border-radius: 40px; font-weight: 600;
    background: var(--button-background); color: var(--button-color); cursor: pointer; }
#alert-modal .button:hover { background: var(--button-background-hover); }
#alert-modal .cancel { display: none; background: #f5f5f5; color: var(--t4s-dark-color); }
#alert-modal.modal--confirm .cancel { display: inline-block; }

/* Screen-reader-only helper used by Cornerstone partials */
.is-srOnly, .aria-description--hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* BigCommerce cookie-consent "Manage Website Data Collection Preferences" bar (appended after the footer once a
   visitor has made a choice). Must stay reachable while consent tracking is on, so it is restyled as a small footer
   link instead of BigCommerce's 48px dark strip (BigCommerce sets inline styles → !important). */
#consent-manager-update-banner { height: auto !important; line-height: 1.6 !important; background-color: var(--t4s-body-background, #fff) !important;
    font-family: inherit !important; font-size: 13px !important; text-align: center; padding: 0 15px 18px; }
#consent-manager-update-banner a { color: var(--text-color) !important; margin: 0 !important; cursor: pointer; text-decoration: underline; }
#consent-manager-update-banner a:hover { color: var(--link-color-hover) !important; }

/* Once the theme has moved the preferences link into the copyright line, hide BigCommerce's (now empty) bar. */
.t4s-consent-link-moved #consent-manager-update-banner { display: none !important; }
.t4s-coppy-right .t4s-consent-link { color: inherit !important; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.t4s-coppy-right .t4s-consent-link:hover { color: var(--link-color-hover); }