/* =====================================================================
   Inter Recycling - cookie consent

   Colours are taken from the theme's own custom properties, with the
   literal token values as fallbacks so the dialogue still looks right if
   it is ever rendered on a page the theme's stylesheet did not reach
   (an error page, say). Changing the palette in _tokens.scss changes
   this too, which is the point.
   ===================================================================== */

.irg {
    /* The accent ramp, and the darker one that carries white labels. White on
       the bright ramp is 2.63:1 at its green end — a button label needs 4.5.
       Same split as the theme, same reason. */
    --ramp:     var(--ir-ramp,      linear-gradient(115deg, #1189c9 0%, #0fa0a0 48%, #2fb573 100%));
    --ramp-fill:var(--ir-ramp-fill, linear-gradient(115deg, #0e74aa 0%, #0c8080 48%, #207e50 100%));
    --accent:   var(--ir-accent,    #0b7878);
    --accent-2: var(--ir-accent-2,  #207e50);
    --ink:      var(--ir-ink,       #082722);
    --text:     var(--ir-body,      #46635f);
    --muted:    var(--ir-muted,     #5c6f6d);
    --paper:    var(--ir-surface,   #ffffff);
    --mist:     var(--ir-mist,      #f1f7f5);
    /* A wash of the accent, for the "on" state of a category switch. */
    --accent-tint: #dff0ee;
    --line:     var(--ir-line,      rgba(8, 39, 34, .12));
    --deep:     var(--ir-deep,      #062b2a);
    --radius:   var(--ir-r,         14px);
    --radius-l: var(--ir-r-lg,      22px);
    --shadow:   var(--ir-shadow-lg, 0 28px 60px rgba(8, 39, 34, .18));
    --ease:     var(--ir-ease-out,  cubic-bezier(.16, 1, .3, 1));
    /* Self-hosted by the theme; the fallbacks are system stacks, never a
       webfont from someone else's server — that would be a disclosure the
       visitor has not agreed to, on the very dialogue that asks them. */
    --display:  'Sora', 'Segoe UI', Helvetica, Arial, sans-serif;
    --body:     'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;

    /* Longhand rather than `inset`, to match the rest of the theme. */
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-family: var(--body);
    color: var(--text);
}

/* A grid/flex rule on a panel overrides [hidden], so it is restated. */
.irg[hidden],
.irg [hidden],
.irg-reopen[hidden] { display: none !important; }

/* A link elsewhere on the page — the footer carries one — may also carry
   .irg-reopen to reopen the dialogue. Only the component's own floating
   button takes the fixed-position styling below; anything else keeps whatever
   its own context gives it. Without this the footer link was lifted out of
   the copyright strip and painted white on white. */
a.irg-reopen:not(.irg-reopen--fab) {
    position: static;
    display: inline;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
}

.irg__scrim {
    position: absolute;
    inset: 0;
    background: rgba(12, 20, 16, .42);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .4s var(--ease);
}

.irg.is-open .irg__scrim { opacity: 1; }

.irg__panel {
    position: relative;
    width: min(100%, 760px);
    max-height: min(86vh, 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 auto 18px;
    padding: 26px 28px 24px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);

    /* The site's motion vocabulary: things arrive from below and settle. */
    transform: translateY(26px) scale(.985);
    opacity: 0;
    transition: transform .55s var(--ease), opacity .4s var(--ease);
}

.irg.is-open .irg__panel { transform: none; opacity: 1; }

.irg__title {
    margin: 0 0 .5rem;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.3rem;
    line-height: 1.25;
    color: var(--ink);
}

.irg__intro {
    margin: 0 0 .85rem;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--muted);
}

.irg__links { margin: 0 0 1.15rem; font-size: .9rem; }

.irg__links a {
    color: var(--accent);
    font-weight: 700;
    text-underline-offset: 3px;
}

/* ----------------------------------------------------------- actions
   Accept and reject are the same element with the same weight, sitting
   side by side. Only the fill differs, and the row reverses on a narrow
   screen so neither is permanently the thumb-nearest one. */
.irg__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 1.25rem;
}

.irg-btn {
    appearance: none;
    flex: 1 1 190px;
    min-height: 48px;
    padding: .8rem 1.3rem;
    border-radius: 999px;
    border: 1.5px solid var(--ink);
    background: transparent;
    color: var(--ink);
    font-family: var(--display);
    font-weight: 800;
    font-size: .92rem;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background .28s var(--ease), color .28s var(--ease),
                border-color .28s var(--ease), transform .28s var(--ease);
}

.irg-btn:hover  { transform: translateY(-1px); }
.irg-btn:active { transform: translateY(0); }

.irg-btn:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

/* "Odbij sve" and "Prihvati sve" are the two consent answers, and they are
   deliberately the same object in two tones: same width, same height, same
   type, both solid. An outlined refuse button beside a filled accept one is
   the usual pattern and is probably defensible, but it does nudge, and the
   EDPB's position is that refusing must be as easy as accepting. Costing
   nothing to remove the argument, it is removed. */
.irg-btn--lead {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.irg-btn--lead:hover { background: #0b3a34; border-color: #0b3a34; }

.irg-btn--accent {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.irg-btn--accent:hover { background: var(--accent-2); border-color: var(--accent-2); }

/* Settings is a third path, not a lesser one - it just is not a choice
   about consent, so it does not compete with the two that are. */
.irg-btn--quiet {
    flex: 0 0 auto;
    border-color: transparent;
    background: none;
    color: var(--muted);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    min-height: 44px;
    padding: .7rem .9rem;
}

.irg-btn--quiet:hover { color: var(--ink); background: var(--mist); }

/* ------------------------------------------------------- preferences */
.irg__cats { display: grid; gap: 12px; }

.irg__cat {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--mist);
}

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

.irg__catName {
    font-family: var(--display);
    font-weight: 800;
    font-size: .98rem;
    color: var(--ink);
}

.irg__always {
    flex: 0 0 auto;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--accent);
    background: var(--accent-tint);
    padding: 4px 9px;
    border-radius: 999px;
}

.irg__catDesc {
    margin: .6rem 0 0;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--muted);
}

/* --- switch ------------------------------------------------------- */
.irg__switch {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
}

.irg__switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.irg__track {
    flex: 0 0 auto;
    position: relative;
    width: 44px;
    height: 25px;
    border-radius: 999px;
    background: #c3cec7;
    transition: background .3s var(--ease);
}

.irg__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(12, 20, 16, .3);
    transition: transform .3s var(--ease);
}

.irg__switch input:checked + .irg__track { background: var(--accent); }
.irg__switch input:checked + .irg__track .irg__thumb { transform: translateX(19px); }

/* A required category reads as settled, not as broken. */
.irg__switch input:disabled + .irg__track { background: var(--accent); opacity: .55; }
.irg__switch:has(input:disabled) { cursor: default; }

.irg__switch input:focus-visible + .irg__track {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

/* --- the cookie table --------------------------------------------- */
.irg__detail { margin-top: .75rem; }

.irg__detail summary {
    cursor: pointer;
    font-size: .83rem;
    font-weight: 700;
    color: var(--accent);
    list-style: none;
}

.irg__detail summary::-webkit-details-marker { display: none; }

.irg__detail summary::before {
    content: '+';
    display: inline-block;
    width: 1em;
    font-weight: 800;
}

.irg__detail[open] summary::before { content: '\2212'; }

.irg__count {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent-tint);
    color: var(--accent);
    font-size: .72rem;
    text-align: center;
}

/* Four columns of prose need to scroll on a phone rather than push the
   panel sideways. */
.irg__table {
    width: 100%;
    margin-top: .6rem;
    border-collapse: collapse;
    font-size: .78rem;
    display: block;
    overflow-x: auto;
}

.irg__table th,
.irg__table td {
    padding: 6px 9px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.irg__table th {
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
}

.irg__table td { color: var(--muted); }

/* The name column holds a phrase in one row and a 32-character hex string
   in another. Give it room, and let long tokens break only where they have
   to - break-all chopped "Kolacic sesije" into "Kolacic sesi / je". */
.irg__table td:first-child,
.irg__table th:first-child { min-width: 11rem; }

.irg__table code {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: .74rem;
    color: var(--text);
    overflow-wrap: anywhere;
    word-break: normal;
}

/* ---------------------------------------------------------- reopen
   Article 7(3) - withdrawing has to be as easy as consenting, so the way
   back is on every page rather than inside a policy document. Bottom
   left, clear of the theme's own bottom-right controls. */
.irg-reopen--fab {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 9990;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--ir-line, rgba(12, 20, 16, .12));
    background: var(--paper, #fff);
    color: var(--accent, #2c7a47);
    box-shadow: var(--ir-shadow-sm, 0 2px 8px rgba(12, 20, 16, .06));
    cursor: pointer;
    opacity: .72;
    transition: opacity .3s, transform .3s, box-shadow .3s;
}

.irg-reopen:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: var(--ir-shadow, 0 12px 32px rgba(12, 20, 16, .10));
}

.irg-reopen svg { fill: none; stroke: currentColor; stroke-width: 1.7; }
.irg-reopen svg circle { fill: currentColor; stroke: none; }

@media (max-width: 600px) {
    .irg__panel { padding: 20px 18px 18px; margin-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
    .irg__actions { flex-direction: column-reverse; align-items: stretch; }
    .irg-btn { flex: 1 1 auto; width: 100%; }
    .irg-reopen { width: 38px; height: 38px; left: 12px; bottom: 12px; }
}

/* Somebody who has asked for less motion still gets the dialogue, just
   without the arrival. */
@media (prefers-reduced-motion: reduce) {
    .irg__panel,
    .irg__scrim,
    .irg-btn,
    .irg__thumb,
    .irg__track { transition: none; }

    .irg__panel { transform: none; }
}

/* ------------------------------------------------- the policy page */
.irg-policy__table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2rem 0 2.2rem;
    font-size: .92rem;
}

.irg-policy__table th,
.irg-policy__table td {
    padding: .7rem .8rem;
    border-bottom: 1px solid var(--ir-line, rgba(12, 20, 16, .12));
    text-align: left;
    vertical-align: top;
}

.irg-policy__table th {
    font-weight: 800;
    color: var(--ir-ink, #0c1410);
    white-space: nowrap;
}

.irg-policy__table code {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: .84rem;
    overflow-wrap: anywhere;
    word-break: normal;
}

.irg-policy__table td:first-child,
.irg-policy__table th:first-child { min-width: 13rem; }

.irg-policy__cat {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .7rem;
    margin-top: 2.4rem;
}

.irg-policy__badge {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent-tint, #dcf0e3);
    color: var(--accent, #2c7a47);
}

.irg-policy__scroll { overflow-x: auto; }