/*
 * EU harmonised notice on the legal guarantee of conformity.
 *
 * Mandatory from 27.09.2026 - Directive (EU) 2024/825, design laid down by
 * Implementing Regulation (EU) 2025/1960, transposed in Romania by GEO no. 18/2026.
 *
 * Markup:   _template/.notificare-armonizata.php (sentence)
 *           _template/.notificare-armonizata-modal.php (notice)
 * Behavior: static/js/notice-guarantee.js
 *
 * Served from https://static.efitness.ro/css/notice-guarantee.css
 */

/* The sentence that opens the notice.
   The Commission guidelines (2.3) require "a sentence informing consumers about
   their legal guarantee rights" which reveals the notice on first click or hover. */
.nagl-line {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin: 10px 0;
    padding: 0;
    font: 400 13px/1.45 Arial, Helvetica, sans-serif;
    color: #6c757d;
    background: none;
    border: 0;
}

.nagl-line svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: #1b3a5c;
}

/* Must not grow: with flex:1 the text would span the whole container and push
   the link to the far right edge of the page. Keep icon, text and link together. */
.nagl-line-txt {
    flex: 0 1 auto;
    min-width: 0;
}

.nagl-line a {
    color: #1b3a5c;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
    cursor: pointer;
}

.nagl-line a:hover {
    color: #0f2740;
}

/* Modal holding the official notice.
   Rendered as a direct child of <body> (see _template/layout.php) so it is never
   trapped inside a stacking context created by page content - otherwise the fixed
   header and sliders paint on top of it despite the high z-index. */
.nagl-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: none;
    background: rgba(0, 0, 0, .72);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
}

.nagl-modal.nagl-open {
    display: block;
}

.nagl-box {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    border-radius: 6px;
    padding: 16px;
}

.nagl-close {
    position: absolute;
    top: 4px;
    right: 8px;
    width: 36px;
    height: 36px;
    border: 0;
    background: none;
    font: 400 30px/36px Arial, Helvetica, sans-serif;
    color: #333;
    cursor: pointer;
}

.nagl-close:hover {
    color: #c00;
}

/* The notice must stay legible at default display size (Commission guidelines, 2.3).
   Below ~520px the text of an A4 sheet becomes too small, so we keep a minimum
   width and let the container scroll horizontally instead of shrinking it. */
.nagl-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.nagl-notice {
    display: block;
    width: 100%;
    min-width: 520px;
    height: auto;
    margin: 10px 0;
}

.nagl-legal {
    margin: 0;
    font: 400 13px/1.5 Arial, Helvetica, sans-serif;
    text-align: center;
    color: #6c757d;
}

.nagl-legal a {
    color: #1b3a5c;
    font-weight: 700;
    text-decoration: underline;
}

@media (max-width: 575px) {
    .nagl-line {
        font-size: 12px;
        gap: 6px;
    }

    .nagl-box {
        padding: 10px;
    }

    .nagl-modal {
        padding: 8px;
    }
}

@media print {
    .nagl-line,
    .nagl-modal {
        display: none !important;
    }
}