/* GioGio — GDPR / consent UI styles.
   All compliance-related CSS lives here in one reviewable place: the consent banner, its
   preference centre, and the marketing opt-in added to the two newsletter forms.
   Loaded from app.blade.php, after main.css so these rules win.

   PALETTE — read this before changing a colour here.
   These values are taken from the COMPILED public/assets/giogio/css/main.css, which is what the
   site actually renders. Do NOT take them from
   resources/assets/front/giogio/styles/partials/_vars.scss: that file is a stale copy of the
   Esushi variables ($main-color #EF5101), and #EF5101 appears ZERO times in GioGio's real CSS.

     --gg-red    #CD0037  primary CTA fill, links, AND checked form controls (142 uses)
     --gg-red-h  rgba(205,0,55,.95)  CTA hover (.headerSlider .containerTextHeader .btn:hover)
     --gg-ink    #2B2A29  body text
     --gg-error  #F20707  validation errors (.form-group .errorMsg)
   Unlike Takumi, GioGio has no separate secondary colour and its checked controls are the same
   crimson as the CTA — so the "always active" badge and the category checkboxes both use --gg-red.
   Type: 'Raleway' for copy (79 declarations, the dominant family); buttons follow the site's
   .button class — 'Manrope' 600, pill radius, 2px crimson border.
   Links on this site use `text-decoration: underline` (.label .text.link), NOT the dashed
   bottom-border convention used on Takumi.

   One rule here is load-bearing for compliance, not cosmetic — do not "tidy" it away:
     * .cookieConsent__btn — Accept and Reject must stay visually identical (same size, weight,
       contrast). Making Reject quieter than Accept is itself an audit finding. */

/* Cookie consent START
   Banner + preference centre (resources/views/front/components/cookieConsent.blade.php). */
.cookieConsent {
    --gg-red: #CD0037;
    --gg-red-h: rgba(205, 0, 55, .95);
    --gg-ink: #2B2A29;
    position: fixed;
    z-index: 2147483000;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: none;
    background: #fff;
    color: var(--gg-ink, #2B2A29);
    font-family: 'Raleway', sans-serif;
    border-radius: 12px;
    box-shadow: 0 6px 30px rgba(43, 42, 41, .22);
    padding: 20px;
    max-width: 720px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.5;
}
.cookieConsent.is-visible {
    display: block;
}
.cookieConsent[hidden] {
    display: none;
}
.cookieConsent__title {
    font-family: 'Raleway', sans-serif;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
}
.cookieConsent__text {
    margin: 0;
}
/* Matches the site's link convention: crimson + underline (.label .text.link).
   padding-right is reset because main.css sets a global `a { padding-right: 15px }`, which is
   harmless on the nav/footer links it was written for but opens a visible gap when a link sits
   mid-sentence — here between the two policy links and before the closing full stop. */
.cookieConsent__link {
    color: var(--gg-red, #CD0037);
    text-decoration: underline;
    padding-right: 0;
}
.cookieConsent__link:hover {
    color: var(--gg-red-h, rgba(205, 0, 55, .95));
}
.cookieConsent__prefs {
    margin-top: 16px;
    border-top: 1px solid rgba(43, 42, 41, .12);
    padding-top: 12px;
}
.cookieConsent__prefs[hidden] {
    display: none;
}
.cookieConsent__cat {
    display: grid;
    grid-template-columns: 20px 1fr;
    grid-column-gap: 10px;
    align-items: start;
    margin-bottom: 12px;
    cursor: pointer;
}
.cookieConsent__cat:last-child {
    margin-bottom: 0;
}
/* Crimson to match the site's checked checkboxes (.label input[type=checkbox]:checked + .check). */
.cookieConsent__cat input {
    width: 16px;
    height: 16px;
    margin: 3px 0 0;
    accent-color: var(--gg-red, #CD0037);
}
.cookieConsent__cat_locked {
    cursor: default;
    opacity: .75;
    /* No checkbox in this row — the badge below takes the control column instead. */
    grid-template-columns: auto 1fr;
}
.cookieConsent__catState {
    align-self: start;
    margin-top: 1px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(205, 0, 55, .1);
    color: var(--gg-red, #CD0037);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
    text-transform: uppercase;
}
.cookieConsent__catName {
    font-weight: 700;
}
.cookieConsent__catDesc {
    grid-column: 2;
    font-size: 13px;
    color: rgba(43, 42, 41, .7);
}
.cookieConsent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
/* Accept and Reject are intentionally identical in size, weight and contrast:
   an opt-out that is harder to reach than opt-in is itself a consent defect.
   Shape copied from the site's .button class: crimson fill, white text, 2px crimson
   border, pill radius, Manrope 600. */
.cookieConsent__btn {
    flex: 1 1 auto;
    min-width: 140px;
    border: 2px solid var(--gg-red, #CD0037);
    background-color: var(--gg-red, #CD0037);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    border-radius: 50px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: .2s;
}
.cookieConsent__btn:hover {
    border-color: var(--gg-red-h, rgba(205, 0, 55, .95));
    background-color: var(--gg-red-h, rgba(205, 0, 55, .95));
}
.cookieConsent__btn[hidden] {
    display: none;
}
/* Secondary actions (Preferences / Save) — crimson outline, so they read as secondary
   WITHOUT making the Reject button quieter than Accept. */
.cookieConsent__btn_ghost {
    background-color: transparent;
    color: var(--gg-red, #CD0037);
    border-color: var(--gg-red, #CD0037);
}
.cookieConsent__btn_ghost:hover {
    background-color: var(--gg-red, #CD0037);
    border-color: var(--gg-red, #CD0037);
    color: #fff;
}
.cookieConsentTrigger {
    cursor: pointer;
}
@media only screen and (max-width: 767px) {
    .cookieConsent {
        left: 8px;
        right: 8px;
        bottom: 8px;
        padding: 16px;
        max-height: 85vh;
        overflow-y: auto;
    }
    .cookieConsent__btn {
        flex: 1 1 100%;
    }
}
/* Cookie consent END */

/* Newsletter consent START
   The marketing opt-in added to the two newsletter forms:
     resources/views/front/templates/feedbackForm.blade.php             (home, catalog, search, CMS pages)
     resources/views/front/components/subscribe/subscribeForm.blade.php (product page, cart result)

   Both render inside `.feedback-form__inner form`, which main.css lays out as a flex ROW
   (.form-group flex:3 + button flex:1, max-width 465px). Dropping the consent block in as a third
   item squeezed all three into that row — collapsing the e-mail field and wrapping the button text.
   Letting the row wrap and giving the consent a full-width line of its own restores the original
   two-item row and puts the consent underneath it.

   The outer element MUST keep the `field-wrap` class. main2.js renders a validation error for a
   checkbox with `n.closest('.field-wrap').append(...)` — with no `.field-wrap` ancestor that
   append() runs against an empty set and the error message renders NOWHERE, leaving the visitor
   with a form that silently refuses to submit. (This differs from Takumi, whose JS uses .after().)
   Because the error is appended as the last child of this block, it lands under the label on its
   own line with no ordering hack needed. */
.feedback-form__inner form {
    flex-wrap: wrap;
}
.subscribeConsent {
    flex: 0 0 100%;
    width: 100%;
    order: 1;
    margin: 14px 0 0;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    line-height: 1.45;
}
.subscribeConsent__label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    cursor: pointer;
}
.subscribeConsent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 2px 0 0;
    accent-color: var(--gg-red, #CD0037);
    cursor: pointer;
}
.subscribeConsent__text {
    flex: 1 1 auto;
}
.subscribeConsent__text a {
    color: #CD0037;
    text-decoration: underline;
    /* Same global `a { padding-right: 15px }` reset as .cookieConsent__link above. */
    padding-right: 0;
}
/* The error div is injected by main2.js, not rendered by the template, and it lands outside
   `.form-group` — so it inherits none of main.css's `.form-group .errorMsg` styling and has to
   be coloured here. #F20707 is the site's own validation red. */
.subscribeConsent .errorMsg {
    color: #F20707;
    font-size: 12px;
    line-height: 1;
    margin: 6px 0 0 23px;
}
/* On small screens main.css switches this form to flex-direction:column, where flex-basis
   refers to HEIGHT — `flex: 0 0 100%` would stretch the consent block to the full container
   height. Width is already 100% in a column, so the basis is simply released here. */
@media only screen and (max-width: 767px) {
    .subscribeConsent {
        flex: 0 0 auto;
    }
}
/* Newsletter consent END */