/* ============================
   Banner Heaven - Styles front
   ============================ */

/* Conteneur principal */
.bannerheaven-container {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    z-index: 9999;
}

/* Couleurs et fond */
.bannerheaven-container {
    background-color: var(--banner-bg, #fff8e7);
    color: var(--banner-text, #000000);
}

/* Texte */
.bannerheaven-text {
    font-family: var(--banner-font, Roboto), sans-serif;
    font-size: var(--banner-size, 18px);
    line-height: var(--banner-lineheight, 22px);
    letter-spacing: var(--banner-spacing, 0px);
    display: inline-block;
    vertical-align: middle;
}

/* Bouton CTA */
.bannerheaven-cta,
.cta-button {
    display: inline-block;
    padding: 8px 16px;
    margin-left: 15px;
    background-color: var(--banner-cta-bg, #ff9800);
    color: var(--banner-cta-text, #ffffff);
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}
.bannerheaven-cta:hover,
.cta-button:hover {
    background-color: #e68900;
}

/* Apparence */
.bannerheaven-overlay,
.banner-overlay {
    background: rgba(0,0,0,0.4);
    position: absolute;
    top:0; left:0; right:0; bottom:0;
}
.bannerheaven-fixed,
.banner-fixed {
    position: fixed;
    left: 0;
    right: 0;
}
.bannerheaven-top,
.banner-top {
    top: 0;
}
.bannerheaven-bottom,
.banner-bottom {
    bottom: 0;
}
.bannerheaven-radius {
    border-radius: var(--banner-radius, 5px);
}
.bannerheaven-margin {
    margin: var(--banner-margin, 10px);
}

/* Effets */
.banner-scroll.left,
.scroll-left {
    animation: scroll-left var(--banner-speed, 10s) linear infinite;
}
.banner-scroll.right,
.scroll-right {
    animation: scroll-right var(--banner-speed, 10s) linear infinite;
}
.banner-blink {
    animation: blink 1s step-start infinite;
}
.banner-fade {
    animation: fadeInOut var(--banner-speed, 5s) ease-in-out infinite;
}

@keyframes scroll-left {
    from { transform: translateX(100%); }
    to   { transform: translateX(-100%); }
}
@keyframes scroll-right {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}
@keyframes blink {
    50% { opacity: 0; }
}
@keyframes fadeInOut {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Compte à rebours */
.bannerheaven-countdown,
.banner-countdown {
    font-weight: bold;
    margin-left: 20px;
    color: #d32f2f;
}

/* ============================
   Back‑Office HelperForm
   ============================ */

/* Prévisualisation */
.bannerheaven-admin-preview {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    padding: 20px;
    background: #f9f9f9;
}

/* Styles des champs dans Back-Office */
.bannerheaven-text-field,
.bannerheaven-cta-field,
.bannerheaven-color-field {
    margin-bottom: 10px;
}

/* Ajout de 10px au-dessus du premier champ "Texte de la bannière" */
.bannerheaven-text-first {
    margin-top: 10px !important;
}

/* Toggle PrestaShop - gris/non, vert/oui */
.ps-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    margin: 0 5px;
    vertical-align: middle;
}
.ps-switch input { display: none; }
.ps-switch span.slide-button {
    position: absolute;
    cursor: pointer;
    background-color: #ccc;
    border-radius: 24px;
    top: 0; left: 0; right: 0; bottom: 0;
    transition: background-color 0.2s;
}
.ps-switch span.slide-button::before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s;
}
.ps-switch input:checked + label + input + label + span.slide-button {
    background-color: #28a745;
}
.ps-switch input:checked + label + input + label + span.slide-button::before {
    transform: translateX(26px);
}

/* Alignement label Non/Oui */
.ps-switch label {
    font-size: 12px;
    line-height: 24px;
    vertical-align: middle;
    margin: 0;
    padding: 0 4px;
    cursor: pointer;
}