/* @category: pays */
/* Importe la structure complète du thème par défaut */
@import url('default.css');

/* ==========================================
   Template: Vietnam (Flexisite Survey)
   Couleurs officielles du drapeau vietnamien
   (rouge #DA251D / étoile dorée #FFCD00),
   utilisées en touches sur une carte claire
   plutôt qu'en fond plein (plus reposant
   pour les yeux sur un long formulaire).
   ========================================== */

/* On écrase les variables de couleurs du thème par défaut */
.poll-template-vietnam {
    --poll-primary-color: #DA251D;   /* rouge du drapeau : titres, bouton, badge */
    --poll-primary-hover: #B01E17;
    --poll-secondary-color: #FFCD00; /* doré de l'étoile, pour les barres de résultats */
    --poll-success-color: #2E7D32;
    --poll-success-bg: #E8F5E9;
    --poll-error-color: #C62828;
    --poll-error-bg: #FDECEA;

    --poll-text-color: #241914;      /* brun très foncé, plus doux qu'un noir pur */
    --poll-muted-color: #8A7F72;
    --poll-bg-light: #FFF8E7;        /* doré très clair, cartes/inputs internes */
    --poll-bg-hover: #FFF0C2;
    --poll-bg-bar: #F5E9C8;

    --poll-border-color: #F0D9A0;
    --poll-border-dark: #E0BD6B;

    --poll-bg-main: #FFFFFF;         /* carte blanche, sobre et reposante */
    --poll-box-shadow: 0 4px 14px rgba(218, 37, 29, 0.10);
}

/* Carte du sondage : bandeau rouge pleine largeur en haut, avec l'étoile
   dorée centrée dessus (28px, comme la version précédente) */
.poll-survey.poll-template-vietnam .poll-container {
    background: var(--poll-bg-main) !important;
    color: var(--poll-text-color) !important;
    border: 1px solid var(--poll-border-color);
    border-radius: 6px;
    box-shadow: var(--poll-box-shadow);
    position: relative;
    overflow: hidden;
    padding-top: 60px; /* bandeau (28px) + marge d'origine (25px) + marge de sécurité */
}

/* Filet de sécurité : le formulaire doit toujours s'afficher au-dessus
   du bandeau et de l'étoile, même en cas de chevauchement imprévu
   selon le contexte d'intégration (position:relative de .poll-col-cover
   est déjà posée plus bas, pour le médaillon) */
.poll-survey.poll-template-vietnam .poll-col-form {
    position: relative;
    z-index: 3;
}

/* default.css réduit le padding de .poll-container à 15px !important sur
   mobile portrait (pour utiliser toute la largeur), ce qui écrase notre
   padding-top de 60px et fait chevaucher le contenu avec le bandeau.
   On rétablit un padding-top suffisant dans le même contexte, avec
   !important pour pouvoir s'imposer face à la règle de default.css. */
@media (max-width: 768px) and (orientation: portrait) {
    .poll-survey.poll-template-vietnam .poll-container {
        padding-top: 48px !important; /* bandeau (28px) + 15px de marge mobile + sécurité */
    }
}

.poll-survey.poll-template-vietnam .poll-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    background: var(--poll-primary-color);
}

.poll-survey.poll-template-vietnam .poll-container::after {
    content: "";
    position: absolute;
    top: -3px; /* dépasse légèrement le bandeau, effet médaille "épinglée" */
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 34px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2750%27%20r%3D%2748%27%20fill%3D%27%23DA251D%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%274%27/%3E%3Cpolygon%20points%3D%2750%2C20%2056.7%2C40.7%2078.5%2C40.7%2060.9%2C53.5%2067.6%2C74.3%2050%2C61.5%2032.4%2C74.3%2039.1%2C53.5%2021.5%2C40.7%2043.3%2C40.7%27%20fill%3D%27%23FFCD00%27/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
    z-index: 2;
}

/* Titres en rouge du drapeau. Le sondage s'intègre parfois seul sur
   une page hôte (titre en h2), parfois imbriqué sous un autre titre,
   ex. la galerie de templates (titre en h3) : on style les deux. */
.poll-survey.poll-template-vietnam h2,
.poll-survey.poll-template-vietnam h3,
.poll-survey.poll-template-vietnam .poll-question-title,
.poll-survey.poll-template-vietnam .poll-stats-title,
.poll-survey.poll-template-vietnam .poll-stats-subtitle {
    color: var(--poll-primary-color);
}

/* Petit médaillon décoratif (étoile dans un rond rouge), superposé en
   bas à droite de l'image de couverture (même technique que le
   template France : un <img> ne peut pas recevoir de pseudo-élément
   CSS, on l'accroche donc sur .poll-col-cover, le wrapper interne du
   widget qui existe dans tous les layouts, quelle que soit la page
   hôte) */
.poll-survey.poll-template-vietnam .poll-col-cover {
    position: relative;
    z-index: 3;
}
.poll-survey.poll-template-vietnam .poll-col-cover::after {
    content: "";
    position: absolute;
    bottom: -10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2750%27%20r%3D%2748%27%20fill%3D%27%23DA251D%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%274%27/%3E%3Cpolygon%20points%3D%2750%2C20%2056.7%2C40.7%2078.5%2C40.7%2060.9%2C53.5%2067.6%2C74.3%2050%2C61.5%2032.4%2C74.3%2039.1%2C53.5%2021.5%2C40.7%2043.3%2C40.7%27%20fill%3D%27%23FFCD00%27/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
    z-index: 2;
}

/* Options de vote : mise en avant dorée de l'option sélectionnée */
.poll-survey.poll-template-vietnam .poll-option-label:hover {
    background: var(--poll-bg-hover);
}
.poll-survey.poll-template-vietnam .poll-option-label:has(input:checked) {
    background: var(--poll-bg-hover);
    border-left: 3px solid var(--poll-primary-color);
    padding-left: 5px;
}

/* Liens de navigation : rouges au survol */
.poll-survey.poll-template-vietnam .poll-nav-links a:hover {
    color: var(--poll-primary-color);
}

/* Curseur (input type="range") en rouge : le thème par défaut ne colore
   pas du tout ce champ, on force donc explicitement la couleur */
.poll-survey.poll-template-vietnam .poll-range {
    accent-color: var(--poll-primary-color);
}

/* Barres de résultats et de statistiques en rouge, plutôt qu'en doré
   (couleur secondaire) : plus lisible et plus affirmé */
.poll-survey.poll-template-vietnam .poll-bar-fill,
.poll-survey.poll-template-vietnam .poll-bar-fill-no,
.poll-survey.poll-template-vietnam .poll-stats-daily-bar-fill {
    background: var(--poll-primary-color);
}