/* =============================================================================
 * style-responsive.css     (becomev BBC/DBC/FBC overlay)
 * -----------------------------------------------------------------------------
 * Loaded AFTER bbc.css. Adds mobile drawer, form linearization, modern
 * messages with CSS-only pastilles, and a compact info-card-row class set.
 *
 * Phases:
 *   1. Foundation         - viewport, fluid wrapper, burger drawer for #menu_bbc
 *   2. Forms & buttons    - XFormularTable linearization, touch sizes, 16px
 *                           inputs (iOS no-zoom), full-width 44px buttons
 *   3. Messages           - flex layout with colored left accent + CSS pastille
 *
 * The master copy lives in becomev/_common/css/. Each of the 3 sites holds
 * a synced copy in <site>/css/style-responsive.css because the file is loaded
 * via a relative URL from the page (each site is on its own domain).
 *
 * Color palette (taken from bbc.css):
 *   #FFF8F2  warm cream (body bg)
 *   #ceaf7e  caramel (button bg)
 *   #481A0D  dark brown (accent)
 *   #262626  dark gray
 * ============================================================================= */

/* ----------------------------------------------------------------------------
 * Theme variables - override these in each site's bbc.css to recolor
 * the buttons / burger / accents per concours. Default values match the
 * BBC dark brown palette.
 *
 * Example override (e.g. at the top of dutchbeerchallenge/css/bbc.css):
 *
 *   :root {
 *     --btn-primary-bg:        #1565c0;
 *     --btn-primary-bg-hover:  #0d47a1;
 *     --btn-accent-color:      #1565c0;
 *   }
 * ---------------------------------------------------------------------------- */
:root {
    --btn-primary-bg:        #481A0D;   /* filled primary button background */
    --btn-primary-bg-hover:  #2e1008;   /* primary button hover */
    --btn-primary-text:      #ffffff;   /* primary button text color */
    --btn-accent-color:      #481A0D;   /* outlined buttons + burger color */
    --btn-danger-color:      #7c050e;   /* destructive action color */
}

/* ----------------------------------------------------------------------------
 * Safe-everywhere helpers
 * ---------------------------------------------------------------------------- */
img {
    max-width: 100%;
    height: auto;
}
html, body {
    overflow-x: hidden;
}

/* Defensive box-sizing on key containers: bbc.css sets paddings on these
 * without box-sizing: border-box, which makes them wider than their parent
 * and overflows the layout (visible on phones, and on desktop for
 * .reg_regfile_product whose absolute buttons would otherwise be cut off). */
#page,
#header,
#main,
#content,
#footer,
.reg_bloc,
.reg_regfile,
.reg_regfile_product {
    box-sizing: border-box;
    max-width: 100%;
}

/* "Required field" marker - replaces the old redstar_small.png. We emit
 * <abbr class="required" title="Required">*</abbr> after the label text.
 * Styles work on all viewports (no @media wrapper). */
abbr.required,
.required {
    color: #c8102e;
    font-weight: bold;
    font-size: 1.05em;
    margin-left: 2px;
    text-decoration: none;
    border-bottom: none;       /* abbr[title] gets a dotted underline by default */
    cursor: help;
}

/* Hidden by default; only revealed inside the mobile @media block below. */
.burger-toggle {
    display: none;
}
.menu-backdrop {
    display: none;
}

/* ----------------------------------------------------------------------------
 * Compact read-only info rows (account_data row templates).
 * Same classes as guest / inscription sites for consistency.
 * ---------------------------------------------------------------------------- */
.info-card {
    background: #ffffff;
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 12px;
    line-height: 1.5em;
}
.info-card-name {
    font-weight: bold;
    font-size: 16px;
    color: var(--btn-accent-color, #481A0D);
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}
.info-card-row {
    font-size: 14px;
    line-height: 1.6em;
    padding: 2px 0;
    color: #333333;
}
.info-card-label {
    font-weight: bold;
    display: inline-block;
    min-width: 130px;
    color: #555555;
}
.info-card-section {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #d6d6d6;
    font-size: 14px;
    line-height: 1.6em;
    color: #555555;
}
.info-card-section a {
    color: var(--btn-accent-color, #481A0D);
}
.info-card-section-title {
    font-weight: bold;
    color: #555555;
    margin-bottom: 6px;
}

/* ----------------------------------------------------------------------------
 * Dossier header layout (desktop AND mobile, since the legacy folder icon
 * was removed by the user). bbc.css forces .reg_regfile_details to 770px
 * with float:left -- now that no image is floated next to it, we want the
 * details block to take the full width of the .reg_regfile container.
 * ---------------------------------------------------------------------------- */
.reg_regfile {
    padding: 12px 14px;
    overflow: hidden;
}
.reg_regfile_details {
    float: none !important;
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
    display: block;
}

/* ----------------------------------------------------------------------------
 * Files page extras (BBC files.inc.php):
 *   - .product-image-link        : the product thumbnail / placeholder is now
 *                                  a link to account_product_documents
 *   - .product-image-empty       : placeholder shown when no image is uploaded
 *   - .reg_regfile_product_buttons : edit/delete buttons stacked vertically
 *   - .reg_regfile_amount        : "Montant a payer" line in the header
 *   - .price-detail-dialog       : popup with the price breakdown table
 * ---------------------------------------------------------------------------- */

/* Clickable product image */
.product-image-link {
    display: inline-block;
    text-decoration: none;
    border-radius: 4px;
}
.product-image-link img {
    display: block;
}
.product-image-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px;
    background: #f4f4f4;
    border: 1px dashed #bbbbbb;
    border-radius: 4px;
    color: #777777;
    text-align: center;
    font-size: 11px;
    line-height: 1.2em;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.product-image-empty:hover,
.product-image-empty:focus {
    background: #eaeaea;
    border-color: var(--btn-accent-color, #481A0D);
    color: var(--btn-accent-color, #481A0D);
}
.product-image-placeholder-icon {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 4px;
}
.product-image-placeholder-label {
    display: block;
    padding: 0 4px;
}

/* Product action buttons stacked vertically on the right.
 * Scoped to a DIRECT child of .reg_regfile_product (the files-page product
 * cards) so this absolute positioning does NOT hijack the same class when it
 * is reused as a plain section-header button (e.g. "Add a company" in
 * account_data / account_filecheckdata), which would otherwise escape its box. */
.reg_regfile_product > .reg_regfile_product_buttons {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    position: absolute;
    top: 8px;
    right: 8px;
}
.reg_regfile_product {
    position: relative;
    padding-right: 50px;        /* leave room for the absolute buttons column */
}
.reg_regfile_product > .reg_regfile_product_buttons a,
.reg_regfile_product > .reg_regfile_product_buttons a img {
    display: block;
}

/* Section-header "add" button (Add a company, etc.): float right inside the
 * .reg_bloc / heading, stay within the box. */
.reg_bloc > .reg_regfile_product_buttons,
.reg_bloc h2 .reg_regfile_product_buttons {
    float: right;
    margin: 0 0 4px 8px;
}

/* Amount + detail link in the dossier header */
.reg_regfile_amount {
    margin-top: 4px;
    font-size: 14px;
}
.reg_regfile_amount b {
    color: var(--btn-accent-color, #481A0D);
}
.price-detail-link {
    margin-left: 6px;
    color: var(--btn-accent-color, #481A0D);
    text-decoration: none;
}
.price-detail-link:hover,
.price-detail-link:focus {
    text-decoration: underline;
}

/* Price detail dialog (HTML5 <dialog>) */
.price-detail-dialog {
    padding: 0;
    border: none;
    border-radius: 6px;
    max-width: 90vw;
    max-height: 90vh;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    background: #ffffff;
}
.price-detail-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}
.price-detail-dialog-body {
    padding: 18px 20px;
    overflow: auto;
}
.price-detail-dialog-body table {
    border-collapse: collapse;
    width: 100%;
}
.price-detail-dialog-body th,
.price-detail-dialog-body td {
    padding: 4px 10px;
}
.price-detail-dialog-body th {
    background: #f4f4f4;
    border-bottom: 1px solid #d6d6d6;
    text-align: left;
}
.price-detail-dialog-close {
    display: flex;
    justify-content: flex-end;
    padding: 10px 16px 16px 16px;
    border-top: 1px solid #eee;
    margin: 0;
}
.price-detail-dialog-close button {
    padding: 8px 18px;
    background: var(--btn-accent-color, #481A0D);
    color: #ffffff;
    border: 1px solid var(--btn-accent-color, #481A0D);
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
}
.price-detail-dialog-close button:hover {
    background: var(--btn-primary-bg-hover, #2e1008);
}

/* Shipping cards extras */
.shipping-card .shipping-dates {
    font-weight: normal;
    color: #888888;
    font-size: 0.85em;
    margin-left: 8px;
    letter-spacing: 0;
}
.shipping-card .info-card-section-address div {
    line-height: 1.5em;
}
.account-info,
.account-address {
    margin: 4px 0 8px 0;
}
.account-address {
    line-height: 1.5em;
}

/* ----------------------------------------------------------------------------
 * Messages (Phase 3) - modern pastille design, replaces any PNG-based styling
 * from bbc.css. One color theme per type for fast visual scanning.
 * ---------------------------------------------------------------------------- */
.message_error,
.message_warning,
.message_confirm,
.message_info,
.message_normal {
    /* Use position-based layout (NOT flex) so that any inline content with
     * <b>, <br/>, etc. flows naturally inside the message box. flex would
     * otherwise turn each inline child into its own flex item, breaking the
     * text into columns. */
    position: relative;
    margin: 10px 0;
    padding: 12px 14px 12px 44px;   /* left padding leaves room for the pastille */
    background: #f4f4f4 none;
    border: 1px solid #d6d6d6;
    border-left: 4px solid #999999;
    border-radius: 4px;
    color: #333333;
    font-size: 14px;
    font-weight: normal;
    text-align: left;
    line-height: 1.5em;
    background-position: 0 0;
    background-repeat: no-repeat;
}
.message_error::before,
.message_warning::before,
.message_confirm::before,
.message_info::before,
.message_normal::before {
    position: absolute;
    top: 13px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #ffffff;
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
}
.message_error {
    background: #fdecea none;
    border-color: #f5c6c0;
    border-left-color: #d93025;
    color: #5e1414;
}
.message_error::before { content: "\2715"; background: #d93025; }  /* X */
.message_error a { color: #b40e1c; }

.message_warning {
    background: #fff4e5 none;
    border-color: #f5dca6;
    border-left-color: #e8a019;
    color: #6b4500;
}
.message_warning::before { content: "!"; background: #e8a019; }

.message_confirm {
    background: #e6f4ea none;
    border-color: #b7e0c2;
    border-left-color: #1e8e3e;
    color: #1d4f25;
}
.message_confirm::before { content: "\2713"; background: #1e8e3e; }  /* check */

.message_info {
    background: #e8f0fe none;
    border-color: #b8cffb;
    border-left-color: #1967d2;
    color: #102e5e;
}
.message_info::before {
    content: "i";
    background: #1967d2;
    font-style: italic;
    font-family: Georgia, serif;
}

.message_normal {
    background: #f4f4f4 none;
    border-color: #d6d6d6;
    border-left-color: #888888;
    color: #333333;
}
.message_normal::before { content: "\2022"; background: #888888; }  /* bullet */

/* ============================================================================
 * BREAKPOINT: viewports up to 860px (tablet portrait & phones)
 * ============================================================================ */
@media (max-width: 860px) {

    body {
        font-size: 100%;
    }

    /* -- Wrapper: fluid -------------------------------------------------- */
    #page {
        width: auto !important;
        max-width: 100%;
        margin: 0 auto;
    }

    /* -- Header: shorter on mobile, bg scaled, room for burger ---------- */
    #header {
        height: 80px !important;
        position: relative;
        background-size: contain;
        background-position: center;
    }

    /* -- Burger toggle button (top-left of header) --------------------- */
    .burger-toggle {
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 1002;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        border: 1px solid var(--btn-accent-color, #481A0D);
        color: var(--btn-accent-color, #481A0D);
        width: 44px;
        height: 44px;
        font-size: 22px;
        line-height: 1;
        padding: 0;
        cursor: pointer;
        border-radius: 4px;
        -webkit-appearance: none;
    }
    .burger-toggle:hover,
    .burger-toggle:focus {
        background: var(--btn-accent-color, #481A0D);
        color: #ffffff;
        outline: none;
    }

    /* -- Languages list: compact in top-right --------------------------- */
    ul#langues {
        position: absolute;
        top: 12px;
        right: 8px;
        z-index: 1002;
        margin: 0;
        padding: 4px 8px;
        background: rgba(255, 255, 255, 0.85);
        border-radius: 4px;
        font-size: 13px;
        list-style: none;
    }
    ul#langues li {
        display: inline-block;
        margin: 0 2px;
    }
    ul#langues a {
        padding: 2px 4px;
    }

    /* -- Menu = drawer (off-canvas) ------------------------------------- */
    /* Over-specified selectors (body ul#menu_bbc) so they beat the base
     * "ul#menu_bbc { ... }" rules from bbc.css. */
    body ul#menu_bbc,
    body #menu_bbc {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 85%;
        max-width: 320px;
        margin: 0 !important;
        padding: 16px 0 24px 0 !important;
        z-index: 1001;
        transform: translateX(-100%);
        transition: transform 0.25s ease-out;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #FFF8F2;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.25);
        list-style: none;
    }
    body.menu-open ul#menu_bbc {
        transform: translateX(0);
    }
    ul#menu_bbc li {
        display: block !important;
        margin: 0 !important;
    }
    ul#menu_bbc li a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        padding: 12px 18px !important;
        font-size: 16px !important;
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    }

    /* -- Backdrop behind the drawer ------------------------------------ */
    .menu-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }
    body.menu-open .menu-backdrop {
        opacity: 1;
        visibility: visible;
    }

    /* Prevent the page scrolling while the drawer is open. */
    body.menu-open {
        overflow: hidden;
    }

    /* When the drawer is open, hide the burger so it doesn't sit on top of
     * the first menu item. The user closes the drawer by clicking either
     * the backdrop or any menu item (which navigates and implicitly closes). */
    body.menu-open .burger-toggle {
        display: none !important;
    }

    /* Language switcher: dropdown mode on mobile.
     * Only the active <li> is visible by default. The <a class="langueActive">
     * has a chevron added via ::after. Clicking it toggles .is-open on the
     * <ul>, which reveals the other languages stacked vertically below. */
    ul#langues {
        position: absolute !important;
        top: 12px;
        right: 8px;
        z-index: 1002;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff;
        border: 1px solid var(--btn-accent-color, #481A0D);
        border-radius: 4px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        list-style: none;
        overflow: hidden;
        float: none !important;
    }
    /* Hide non-active items by default */
    ul#langues > li {
        display: none !important;
        margin: 0 !important;
    }
    /* Show only the active one */
    ul#langues > li.lang-li-active {
        display: block !important;
    }
    /* When opened, show all */
    ul#langues.is-open > li {
        display: block !important;
        border-top: 1px solid #eeeeee;
    }
    ul#langues.is-open > li.lang-li-active {
        border-top: none;
    }
    ul#langues > li > a {
        display: block;
        padding: 6px 12px !important;
        font-size: 14px !important;
        font-weight: bold;
        text-decoration: none;
        color: var(--btn-accent-color, #481A0D) !important;
        background: transparent !important;
        text-align: center;
    }
    ul#langues > li > a.langueActive {
        background: var(--btn-accent-color, #481A0D) !important;
        color: #ffffff !important;
    }
    ul#langues > li > a.langueActive::after {
        content: " \25BE";   /* small down-pointing triangle */
        font-size: 0.85em;
        margin-left: 4px;
    }
    ul#langues.is-open > li > a.langueActive::after {
        content: " \25B4";   /* up-pointing triangle */
    }

    /* -- Main + Content ------------------------------------------------- */
    #main {
        min-height: 0 !important;
        padding-top: 5px;
    }
    #content {
        padding: 12px !important;
    }

    /* -- Footer --------------------------------------------------------- */
    #footer {
        padding: 10px !important;
    }
    #footer .left,
    #footer .right {
        float: none !important;
        text-align: center;
        margin-bottom: 8px;
    }

    /* ====================================================================
     * Phase 2 - Forms & buttons (mobile)
     * ==================================================================== */

    /* -- Linearize the <table class="XFormularTable"> ------------------- */
    table.XFormularTable,
    table.XFormularTable tbody,
    table.XFormularTable tr,
    table.XFormularTable th,
    table.XFormularTable td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
        height: auto !important;
        min-height: 0;
    }
    table.XFormularTable tr {
        margin-bottom: 8px;
        padding: 0;
    }
    table.XFormularTable th {
        padding: 8px 0 4px 0;
        text-align: left;
        vertical-align: top;
        font-weight: bold;
        min-width: 0;
    }
    table.XFormularTable td {
        padding: 0 0 6px 0;
        vertical-align: top;
    }
    /* Nested helper tables: keep them readable */
    table.XFormularTable table th,
    table.XFormularTable table td {
        padding: 2px 6px 2px 0;
    }

    /* -- Form fields: full width, 16px (no iOS zoom) -------------------- */
    input[type=text],
    input[type=email],
    input[type=password],
    input[type=tel],
    input[type=number],
    input[type=date],
    input[type=datetime-local],
    input[type=search],
    input[type=url],
    input[type=file],
    select,
    textarea {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px;
        padding: 8px;
        margin: 2px 0;
    }
    textarea {
        min-height: 80px;
    }
    input[type=radio],
    input[type=checkbox] {
        width: auto !important;
        transform: scale(1.2);
        margin: 4px 6px 4px 0;
    }

    /* -- Buttons: 5 variants for clear visual hierarchy ----------------- */
    /*
     * .buttons / div.buttons                          : container (row-wrap)
     * <button class="negative">                       : primary submit (forms)
     * <a class="a_button a_button--primary">          : main action (default)
     * <a class="a_button a_button--secondary">        : important, full-width
     * <a class="a_button a_button--secondary-inline"> : same outlined look, auto
     *                                                   width, multiple per row
     * <a class="a_button a_button--link">             : tertiary, text-link
     * <a class="a_button a_button--danger">           : destructive
     *
     * The variant comes from the 5th param of DisplayButton() /
     * DisplayButtonFA() in global-tools-becomev.inc.php.
     */
    .buttons,
    div.buttons {
        display: flex;
        flex-flow: row wrap;
        gap: 8px;
        margin: 10px 0;
        overflow: visible;
        align-items: stretch;
        justify-content: flex-start;
    }
    .buttons button,
    .buttons button[type] {
        float: none !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        margin: 0 !important;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 16px;
        text-align: center;
    }
    /* Shared geometry for all a_button variants */
    .buttons .a_button,
    .buttons a.a_button {
        float: none !important;
        display: block !important;
        box-sizing: border-box;
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 14px !important;
        min-height: 44px;
        font-size: 16px !important;
        font-weight: bold !important;
        text-align: center !important;
        text-decoration: none !important;
        line-height: 1.3 !important;
    }
    .buttons .a_button img {
        vertical-align: middle;
        margin-right: 6px;
    }

    /* --- primary : filled brand color ---------------------------------- */
    .buttons .a_button--primary,
    .buttons a.a_button--primary {
        background: var(--btn-primary-bg, #481A0D) !important;
        background-image: none !important;
        color: var(--btn-primary-text, #ffffff) !important;
        border: 1px solid var(--btn-primary-bg, #481A0D) !important;
    }
    .buttons .a_button--primary:hover,
    .buttons .a_button--primary:focus {
        background: var(--btn-primary-bg-hover, #2e1008) !important;
        color: var(--btn-primary-text, #ffffff) !important;
    }

    /* --- secondary : outlined brown, full-width ----------------------- */
    .buttons .a_button--secondary,
    .buttons a.a_button--secondary {
        background: transparent !important;
        background-image: none !important;
        color: var(--btn-accent-color, #481A0D) !important;
        border: 1px solid var(--btn-accent-color, #481A0D) !important;
    }
    .buttons .a_button--secondary:hover,
    .buttons .a_button--secondary:focus {
        background: var(--btn-accent-color, #481A0D) !important;
        color: #ffffff !important;
    }

    /* --- secondary-inline : same look as secondary, but auto width ---- */
    .buttons .a_button--secondary-inline,
    .buttons a.a_button--secondary-inline {
        background: transparent !important;
        background-image: none !important;
        color: var(--btn-accent-color, #481A0D) !important;
        border: 1px solid var(--btn-accent-color, #481A0D) !important;
        width: auto !important;
        flex: 0 1 auto;
        min-width: 130px;
        padding: 8px 14px !important;
        font-size: 15px !important;
    }
    .buttons .a_button--secondary-inline:hover,
    .buttons .a_button--secondary-inline:focus {
        background: var(--btn-accent-color, #481A0D) !important;
        color: #ffffff !important;
    }

    /* --- link : text-only, underlined ---------------------------------- */
    .buttons .a_button--link,
    .buttons a.a_button--link {
        background: transparent !important;
        background-image: none !important;
        border: none !important;
        color: var(--btn-accent-color, #481A0D) !important;
        font-size: 14px !important;
        font-weight: normal !important;
        text-decoration: underline !important;
        min-height: 36px;
        padding: 6px 10px !important;
    }
    .buttons .a_button--link:hover,
    .buttons .a_button--link:focus {
        color: var(--btn-primary-bg-hover, #2e1008) !important;
        text-decoration: none !important;
        background: transparent !important;
    }
    .buttons .a_button--link img {
        display: none !important;
    }

    /* --- danger : destructive ------------------------------------------ */
    .buttons .a_button--danger,
    .buttons a.a_button--danger {
        background: #ffffff !important;
        background-image: none !important;
        color: var(--btn-danger-color, #7c050e) !important;
        border: 1px solid var(--btn-danger-color, #7c050e) !important;
    }
    .buttons .a_button--danger:hover,
    .buttons .a_button--danger:focus {
        background: var(--btn-danger-color, #7c050e) !important;
        color: #ffffff !important;
    }

    /* -- Blocks --------------------------------------------------------- */
    .reg_bloc,
    .reg_regfile {
        margin: 10px 0;
        padding: 12px;
        box-sizing: border-box;
        max-width: 100%;
    }

    /* -- reg_regfile children: bbc.css hardcodes 770px on .reg_regfile_details
     *    and floats things. Kill the floats and let everything be fluid. */
    .reg_regfile_details {
        position: static !important;
        float: none !important;
        width: auto !important;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0;
        display: block;
    }
    .reg_regfile img.regbox_img {
        float: none !important;
        margin: 0 auto 8px auto !important;
        display: block;
        position: static !important;
    }
    .reg_regfile_product,
    .reg_regfile_id {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100%;
    }
    /* (note: the old mobile override that forced .reg_regfile_product_buttons
     *  back to position: static has been removed - we now want the absolute
     *  top-right column behaviour to apply on mobile too, so the icons sit on
     *  the right of the beer info instead of above it.) */

    /* -- Messages: tighter padding on phones, but PRESERVE the left padding
     *    so the absolutely-positioned pastille (icon) doesn't overlap text. */
    .message_error,
    .message_warning,
    .message_confirm,
    .message_info,
    .message_normal {
        padding: 10px 12px 10px 44px;
        font-size: 14px;
    }

    /* -- Hotel-card mini override -------------------------------------- */
    .info-card-label {
        min-width: 110px;
    }
}

/* ============================================================================
 * BREAKPOINT: viewports up to 480px (small phones, extra tight)
 * ============================================================================ */
@media (max-width: 480px) {
    #header {
        height: 70px !important;
    }
    #content {
        padding: 10px !important;
    }

    /* Make the dropdown a bit smaller / tighter on very small phones. */
    ul#langues {
        top: 10px;
        right: 6px;
    }
    ul#langues > li > a {
        padding: 5px 10px !important;
        font-size: 13px !important;
    }
}

/* ============================================================================
 * Belt-and-suspenders: explicit desktop rules with !important.
 * Guarantee correct rendering even if a stale cached copy of an earlier
 * version of this file (without the global "display: none" rules) is somehow
 * still being served. Harmless on a fresh load.
 * ============================================================================ */
@media (min-width: 861px) {
    .burger-toggle  { display: none !important; }
    .menu-backdrop  { display: none !important; }
}