/* =====================================================================
   AMSYS - cookie consent

   THE TOKEN BLOCK BELOW IS WRITTEN FOR THIS SITE, NOT RENAMED.

   This stylesheet has now been ported twice - it arrived as --ir-*, was
   renamed to --nn-*, and each time the FALLBACK LITERALS came along
   unchanged. A var() that does not resolve falls silently back to its
   default, so the banner kept working perfectly and simply came out in the
   previous client's colours: teal the first time, NONO's browns the second.
   Nothing reports that as an error. So every value here is stated fresh
   against rt_amsyseu's palette, straight out of
   templates/rt_amsyseu/custom/config/27/styles.yaml.

   rt_amsyseu is a dark theme, so the dialogue is dark: a near-black navy
   card with violet controls, which is what the rest of the site looks like.
   ===================================================================== */

.amsg {
    /* styles.yaml accent-1. White on it is 5.83:1 - it can carry a label. */
    --accent:      #6c3bf5;
    /* The mark's own violet. White on it is 7.59:1 - the primary button. */
    --ramp:        #5100fd;
    --ramp-fill:   #3f00c9;
    /* styles.yaml accent-2. 12.7:1 on the navy, 1.58:1 under white, so it
       is a colour for text ON the dark card and never a fill behind it. */
    --accent-2:    #22e1ff;
    /* Text links on the dark card. --accent is the button FILL and is only
       3.19:1 as text on this ground - it fails AA for body copy, which is
       what a "read the cookie policy" link is. Links take the cyan. */
    --link:        #22e1ff;

    /* --ink is this stylesheet's STRONGEST TEXT colour, not a background.
       It is used for headings, table headers and hover text throughout.
       Setting it to the theme's near-black - which is what "ink" means
       everywhere else in this project - painted the banner's title black
       on a black card, and the heading simply disappeared. */
    --ink:         #f2f5fb;
    --deep:        #05070f;   /* base.background: an actual dark surface */
    /* The refuse button's fill. It needs to be a SOLID button of the same
       weight as accept - see the note on .amsg-btn--lead - so it cannot
       reuse --ink now that --ink is nearly white. */
    --lead:        #39406b;
    --lead-hover:  #4a5384;
    --paper:       #0d1220;   /* the card itself - dark, not white */
    --mist:        #141a2b;   /* a raised surface on the card */
    --text:        #c3ccdd;   /* base.text-color, lifted for body copy */
    --muted:       #8b95ab;
    --line:        rgba(168, 178, 198, .18);
    /* The "on" state of a category switch: a wash of the accent that still
       reads as lit on a dark ground. */
    --accent-tint: rgba(108, 59, 245, .22);

    --radius:      10px;
    --radius-l:    14px;
    --shadow:      0 2px 4px rgba(5, 7, 15, .3), 0 28px 60px -22px rgba(5, 7, 15, .75);
    --ease:        cubic-bezier(.16, 1, .3, 1);

    /* ------------------------------------------------------------------
       LAYOUT. This half of the rule was lost once already: the pass that
       rewrote the palette above cut the rule at the first `}` it found
       after --ease, and took the positioning with it. The dialogue then
       had position:static, fell into normal document flow at the end of
       <body>, and appeared at the very bottom of the page instead of over
       it - visible only after scrolling the whole site.

       If you edit the tokens again, the rule does not end at --ease.
       ------------------------------------------------------------------ */
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: flex;
    justify-content: center;
    /* CENTRED, not a bottom sheet. */
    align-items: center;

    font-family: var(--body, inherit);
    color: var(--text);
}

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

/* A link elsewhere on the page — the footer carries one — may also carry
   .amsg-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.amsg-reopen:not(.amsg-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;
}

.amsg__scrim {
    position: absolute;
    inset: 0;
    /* The site's own near-black navy, not the green-black this arrived
       with. Darker than the 42% it was, too: the dialogue is centred now,
       and a modal that does not visibly take over the page reads as
       something the visitor may ignore. */
    background: rgba(5, 7, 15, .62);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .4s var(--ease);
}

.amsg.is-open .amsg__scrim { opacity: 1; }

.amsg__panel {
    position: relative;
    width: min(100%, 760px);
    max-height: min(86vh, 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Plain auto: the 18px bottom margin was the gap a bottom sheet needs
       from the edge of the screen, and it pushes a centred card off centre. */
    margin: 0 auto;
    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);
}

.amsg.is-open .amsg__panel { transform: none; opacity: 1; }

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

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

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

.amsg__links a {
    color: var(--link);
    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. */
.amsg__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 1.25rem;
}

.amsg-btn {
    appearance: none;
    flex: 1 1 190px;
    min-height: 48px;
    padding: .8rem 1.3rem;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    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);
}

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

.amsg-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. */
.amsg-btn--lead {
    background: var(--lead);
    border-color: var(--lead);
    color: #fff;
}

.amsg-btn--lead:hover { background: var(--lead-hover); border-color: var(--lead-hover); }

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

/* NOT --accent-2: that is the cyan, and white on it is 1.58:1. The
   hover goes darker, not lighter. */
.amsg-btn--accent:hover { background: var(--ramp-fill); border-color: var(--ramp-fill); }

/* 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. */
.amsg-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;
}

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

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

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

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

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

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

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

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

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

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

.amsg__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(5, 7, 15, .45);
    transition: transform .3s var(--ease);
}

.amsg__switch input:checked + .amsg__track { background: var(--accent); }
.amsg__switch input:checked + .amsg__track .amsg__thumb { transform: translateX(19px); }

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

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

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

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

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

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

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

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

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

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

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

.amsg__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". */
.amsg__table td:first-child,
.amsg__table th:first-child { min-width: 11rem; }

.amsg__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. */
.amsg-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(--line);
    background: var(--paper);
    color: var(--accent-2);
    box-shadow: 0 2px 8px rgba(5, 7, 15, .35);
    cursor: pointer;
    opacity: .72;
    transition: opacity .3s, transform .3s, box-shadow .3s;
}

.amsg-reopen:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

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

@media (max-width: 600px) {
    /* A phone keeps the bottom sheet: the panel is nearly as tall as the
       screen there, so centring gains nothing and puts the buttons further
       from the thumb. */
    .amsg { align-items: flex-end; }
    .amsg__panel { padding: 20px 18px 18px; margin-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
    .amsg__actions { flex-direction: column-reverse; align-items: stretch; }
    .amsg-btn { flex: 1 1 auto; width: 100%; }
    .amsg-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) {
    .amsg__panel,
    .amsg__scrim,
    .amsg-btn,
    .amsg__thumb,
    .amsg__track { transition: none; }

    .amsg__panel { transform: none; }
}

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

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

.amsg-policy__table th {
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
}

.amsg-policy__table code {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: .84rem;
    overflow-wrap: anywhere;
    word-break: normal;
    /* Stated, because the theme's default <code> colour on this dark
       ground is a pink that has nothing to do with this palette. */
    color: var(--link);
    background: none;
    padding: 0;
}

/* The policy page's own prose. These three carried WANG X class names
   (wx-lead, wx-btn, wx-muted) through two ports; none of them exist on
   this theme, so they styled nothing and the "change settings" control
   rendered as grey text on grey. */
.amsg-policy__lead {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text);
}

.amsg-policy__change {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    width: auto;
    min-height: 44px;
}

.amsg-policy__note {
    font-size: .88rem;
    color: var(--muted);
}

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

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

.amsg-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-2);
}

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