/* ===========================================================
   ADMIN CSS — Re-ActiveDogs — V3.1.2
   Harmonisation, annotations, et suppression des doublons
   =========================================================== */


/* ===================== VARIABLES & RESET =================== */

/* 
   Variables CSS globales (palette et styles du thème admin Re-ActiveDogs)
   -------------------------------------------------------------
   Utilisation via var(--admin-bg) etc. Permet de modifier facilement tout le design.
   - Couleurs principales, secondaires, d'accentuation
   - Couleurs de statut (draft, published, warning, etc)
   - Rayons de bordure (gros et petit)
   - Ombres, typos, police principale
*/
:root {
  --admin-bg: #e2e3e3;            /* Couleur de fond de toute la page admin */
  --admin-card: #fff;              /* Fond des cartes/conteneurs/formulaires */
  --admin-accent: #236575;         /* Couleur principale (bleu-vert sobre) */
  --admin-accent-light: #30824e;   /* Variante accent claire (boutons, hover) */
  --admin-accent-dark: #184757;    /* Variante accent foncée (hover, contraste) */
  --admin-draft: #c7b0fa;          /* Fond pour statut "brouillon" */
  --admin-published: #ffe5c1;      /* Fond pour statut "publié" */
  --admin-shadow: 0 2px 16px rgba(61,125,140,0.08); /* Ombre douce générique */
  --admin-radius: 16px;            /* Rayon par défaut pour les grosses cartes/boîtes */
  --admin-radius-sm: 10px;         /* Rayon plus petit pour éléments secondaires */
  --admin-red: #d1442a;            /* Rouge vif (suppression, erreur, alerte) */
  --admin-green: #30824e;          /* Vert (validation, succès) */
  --admin-blue: #407fb7;           /* Bleu (statut, infos) */
  --admin-orange: #e67e22;         /* Orange vif (statut publié, hover) */
  --admin-txt-dark: #236575;       /* Couleur texte principale */
  --admin-txt-light: #fff;         /* Couleur texte inversée (boutons, header) */
  --admin-font: 'Montserrat', Arial, sans-serif; /* Police principale de tout l’admin */
}

/* --- RESET GÉNÉRAL : neutralise le style navigateur, force la base clean --- */
body.admin-root, .admin-root {
  font-family: var(--admin-font);       /* Police définie plus haut */
  background: var(--admin-bg) !important; /* Fond général admin */
  color: var(--admin-txt-dark);         /* Texte par défaut : couleur thème */
  margin: 0; padding: 0; min-height: 100vh; /* Remplit tout l’écran, aucun espace parasite */
}
/* 
   Toutes les * (tous éléments enfants de .admin-root) sont en box-sizing: border-box
   Cela veut dire que padding et bordure sont inclus dans la largeur/hauteur déclarée.
   (évite tout débordement, alignement toujours prévisible)
*/
.admin-root * { box-sizing: border-box; }


/* ===================== PASSWORD FIELD (LOGIN) ===================== */

/* 
   Champ input (mot de passe ou texte) :
   - Style identique masqué/visible pour éviter tout "saut" visuel lors du toggle.
   - padding-right = espace réservé à l’œil (jamais de chevauchement texte/logo).
   - height fixe = œil TOUJOURS parfaitement centré, peu importe la police/OS.
   - appearance: none = neutralise le style natif (iOS, Android, Edge).
*/
.password-field input[type="password"],
.password-field input[type="text"] {
  width: 100%;                         /* Le champ occupe toute la largeur du bloc parent */
  padding-right: 44px !important;      /* Réserve toujours 44px à droite pour le bouton œil */
  box-sizing: border-box;              /* Inclut padding/border dans la largeur (évite débordement) */
  background: #fff;                    /* Fond blanc, neutre (cohérence design) */
  color: var(--admin-accent);          /* Texte principal (bleu admin) */
  border: 1px solid #b4c5cc;           /* Bordure douce, claire */
  border-radius: 8px;                  /* Coins arrondis pour un look moderne */
  font-size: 1.09em;                   /* Texte légèrement agrandi */
  height: 48px;                        /* Hauteur fixe, centre toujours le bouton œil */
  line-height: 1.2;                    /* Alignement vertical du texte, peu importe la taille */
  transition: border 0.14s, background 0.14s;
  appearance: none;                    /* Désactive le style natif navigateur */
  padding-left: 0.7em !important;       /* Ajoute toujours un espace à gauche (texte ET placeholder) */
  padding-right: 44px !important;       /* Réserve la place pour le bouton œil, évite tout chevauchement */
  height: 48px !important;              /* Hauteur rigide, évite les effets de "saut" lors du toggle */
  line-height: 1.2 !important;          /* Assure un alignement vertical constant */
  box-sizing: border-box;               /* Inclut padding et bordure dans le calcul total (pas de débordement) */
  vertical-align: middle !important;    /* Aligne verticalement le champ (utile si flex/faux alignements) */
  display: block !important;            /* Prévient les effets inline/inline-block (problèmes de centrage possible sinon) */
}

/*
   Focus visuel :
   - Ajoute une bordure accentuée + halo bleu léger pour accessibilité (clavier/souris).
   - Fond légèrement grisé pour feedback.
*/
.password-field input[type="password"]:focus,
.password-field input[type="text"]:focus {
  outline: 2px solid #23657544;        /* Halo bleu clair en arrière-plan du champ */
  border: 1.6px solid #236575;         /* Bordure accentuée bleu admin */
  background: #f1f5f7;                 /* Fond grisé pour retour visuel focus */
}

/*
   Bloc contenant l’input + bouton "œil".
   Sert à positionner le bouton en absolu et à aérer le champ dans le formulaire.
*/
.password-field {
  position: relative;         /* Crée un contexte pour positionner l’œil en absolute dans ce bloc */
  width: 100%;                /* Prend toute la largeur du parent (typiquement le formulaire) */

}

/*
   Bouton "œil" toggle (afficher/masquer le mot de passe) :
   - Toujours positionné à droite, à l’intérieur du champ (absolu dans .password-field).
   - Flex pour centrer parfaitement l’icône SVG dans la zone de clic.
   - Large zone de clic (28x28px) pour confort tactile/souris.
   - Jamais de fond, bordure ou ombre (contrôle total).
   - z-index 10 : jamais recouvert par l’input.
*/
.toggle-password {
  position: absolute;                  /* Prend la main sur le flow normal (absolu par rapport à .password-field) */
  right: 10px;                         /* Décalé à 10px du bord droit du champ */
  top: 24px;                            /* Position verticale au milieu du champ parent */
  transform: translateY(-50%);         /* Correction pour centrer parfaitement (axe Y) */
  background: transparent !important;  /* Jamais de fond, même hérité */
  border: none !important;             /* Aucune bordure */
  box-shadow: none !important;         /* Aucune ombre même héritée */
  padding: 0 !important;               /* Pas de padding parasite */
  margin: 0;                           /* Pas de marge parasite */
  cursor: pointer;                     /* Curseur "main" : bouton interactif */
  outline: none;                       /* Désactive l’outline natif (SVG gère l’état focus) */
  z-index: 10;                         /* Passe toujours au-dessus de l’input */
  width: 28px; height: 28px;           /* Zone cliquable carrée (confort tactile/souris) */
  display: flex;                       /* Centre parfaitement le SVG dans le bouton */
  align-items: center;                 /* Centrage vertical (dans le bouton) */
  justify-content: center;             /* Centrage horizontal */
}

/*
   Icône SVG œil :
   - Toujours la même taille (23x23), jamais de fond ou d’ombre parasite.
   - Couleur thème admin (#236575) bien visible, ombre discrète pour contraste.
   - Transition douce (hover/focus).
*/
.toggle-password svg {
  width: 23px; height: 23px;                   /* Taille idéale pour l’œil */
  color: #236575 !important;                   /* Couleur admin */
  background: none !important;                 /* Pas de fond, même hérité */
  box-shadow: none !important;                 /* Pas d’ombre parasite */
  opacity: 1;
  transition: opacity 0.16s, color 0.16s, filter 0.16s; /* Animation fluide hover/focus */
  filter: drop-shadow(0 1.5px 2px #0001);      /* Mini ombre pour détacher l’œil du fond blanc */
}

/*
   Hover/focus : l’icône devient orange (feedback utilisateur).
   - Ombre chaude pour signal visuel supplémentaire.
*/
.toggle-password:hover svg,
.toggle-password:focus svg {
  color: #e67e22 !important;                  /* Orange vif sur hover/focus */
  opacity: 1;
  filter: drop-shadow(0 1px 2px #d1442a11);   /* Ombre chaude pour effet lumineux */
}

/*
   Placeholder :
   - Uniformise couleur, opacité et padding sur tous les navigateurs et pour tous les types.
   - Résultat : "Mot de passe" visuellement identique en mode masqué/visible, et jamais collé à gauche.
*/
.password-field input[type="password"]::placeholder,
.password-field input[type="text"]::placeholder {
  color: var(--admin-accent) !important; /* Couleur du thème (lisible, cohérent) */
  opacity: 1 !important;                 /* Toujours pleine opacité (pas de gris trop pâle) */
  padding-left: 0 !important;            /* Annule tout padding parasite du placeholder (Safari, Edge, Chrome) */
}

/* ===================== SECTION LOGIN ======================= */
.admin-login-form {
  background: var(--admin-card);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-shadow);
  max-width: 420px;
  margin: 10vh auto 0 auto;
  padding: 2.3rem 2rem 2rem 2rem;
  display: flex; flex-direction: column; gap: 1.3rem;
  border: none;
}
.admin-login-form h1 {
  color: var(--admin-accent); font-size: 1.6em; margin-bottom: 1.2em; letter-spacing: 1px; font-weight: 700;
}
.admin-login-form input[type="password"],
.admin-login-form input[type="text"] {
  width: 100%;
  margin-bottom: 1.2rem;
  border-radius: 8px;
  border: 1px solid #b4c5cc;
  font-size: 1.09em;
  color: var(--admin-accent);
  background: #fff;
  /* 
    Padding haut/bas UNIFIÉ, padding gauche/droite géré dans .password-field
    (donc on laisse padding-top/bottom ici, le reste est dans .password-field)
  */
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}
.admin-login-form input[type="password"]:focus { outline: 2px solid #23657544; }
.admin-login-form button {
  background: var(--admin-accent); color: #fff; border: none;
  padding: 0.7rem 1.5rem; border-radius: 8px; font-weight: 700; font-size: 1.1em; cursor: pointer;
  box-shadow: var(--admin-shadow); transition: background 0.18s;
}
.admin-login-form button:hover { background: var(--admin-accent-dark); color: #fff; }
.admin-login-form label,
.admin-login-form ::placeholder,
.admin-login-form input,
.admin-login-form h1 { color: var(--admin-accent) !important; }



/* ===================== CONTAINER PRINCIPAL ================= */
.admin-container {
  max-width: 1040px;
  margin: 2.3rem auto;
  background: var(--admin-card);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-shadow);
  padding: 2.2em 2em 2.5em 2em;
  transition: background 0.18s, border-color 0.2s;
  border: none;
}



/* ===================== HEADER / BAR ======================== */
.admin-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 2em;
}
.admin-header h1 {
  margin: 0; font-size: 2.1em; font-weight: 800; letter-spacing: 1px; color: var(--admin-accent);
}
.admin-logout-btn {
  background: var(--admin-red); color: var(--admin-txt-light);
  padding: 0.56em 1.2em; border-radius: 18px; font-weight: 600; font-size: 1.1em; border: none;
  box-shadow: 0 2px 8px #0001; cursor: pointer; transition: background 0.18s, scale 0.08s;
}
.admin-logout-btn:hover { background: #a92b15; scale: 1.04; }

.admin-order-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: -0.8rem 0 1rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid #c8d9df;
  border-radius: 12px;
  background: #f6f9fa;
}
.admin-order-help {
  flex: 1 1 280px;
  margin: 0;
  color: #34545d;
  font-size: 0.95rem;
  line-height: 1.35;
}
.admin-save-order-btn {
  min-height: 34px;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--admin-accent);
  border-radius: 9px;
  background: var(--admin-accent);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.admin-order-status {
  min-height: 20px;
  color: #34545d;
  font-size: 0.92rem;
  font-weight: 700;
}
.admin-order-status.ok { color: var(--admin-green); }
.admin-order-status.bad { color: var(--admin-red); }
.admin-order-status.warn,
.admin-order-status.saving { color: var(--admin-orange); }

.rd-actu-carousel-settings {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(150px, auto));
  gap: .75rem;
  align-items: end;
}
.rd-actu-carousel-settings h2 { margin: 0; font-size: 1.15rem; letter-spacing: 0; }
.rd-actu-carousel-settings label { display: grid; gap: .25rem; margin: 0; }
.rd-inline-check { display: flex !important; align-items: center; gap: .5rem; }
.rd-inline-check input { flex: 0 0 auto; }
.rd-inline-field { display: flex; align-items: center; gap: .35rem; }
.rd-inline-field input { width: 6rem; }
.rd-actu-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .75rem;
  padding: .65rem .75rem;
  border: 1px solid #d6e2e4;
  background: #f8fbfb;
}
.rd-inline-form { display: inline-flex; margin: 0; }

@media (max-width: 820px) {
  .rd-actu-carousel-settings { grid-template-columns: 1fr 1fr; }
  .admin-header { align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .rd-actu-carousel-settings { grid-template-columns: 1fr; }
  .admin-container { margin: .5rem; padding: 1rem; }
  .admin-art-row2 > *, .admin-actions a, .admin-actions button { flex: 1 1 145px; justify-content: center; min-width: 0; }
}


/* ===================== BOUTON AJOUT ======================== */
.admin-add-btn {
  background: var(--admin-accent-light); color: var(--admin-txt-light); border: none;
  padding: 0.83rem 2.2rem; border-radius: 2em; font-weight: 700; font-size: 1.21em;
  cursor: pointer; position: fixed; right: 2.5vw; bottom: 4vw; box-shadow: 0 4px 16px #23657533;
  z-index: 100; transition: background 0.15s, transform 0.07s;
}
.admin-add-btn:hover { background: var(--admin-accent-dark); transform: translateY(-3px) scale(1.04); }


/* ============== ARTICLE LIST (listing en admin) ============== */
.admin-article-list {
  list-style: none; padding: 0; margin: 2rem 0 0 0;
}
.admin-article-list li {
  background: var(--admin-card); border-radius: var(--admin-radius-sm);
  border-left: 7px solid var(--admin-accent);
  box-shadow: 0 2px 12px #0001; margin-bottom: 2.4em;
  padding: 1.1em 1.5em 0.6em 1.2em; display: flex; flex-direction: column;
  transition: box-shadow 0.13s, border-color 0.13s; border: none;
}
.admin-article-list li[data-status="published"] { border-left: 7px solid var(--admin-orange);}
.admin-article-list li[data-status="draft"] { border-left: 7px solid var(--admin-blue);}
.admin-art-row1 { display: flex; align-items: center; gap: 1.7em; flex-wrap: wrap; }
.admin-art-title { font-weight: 700; color: var(--admin-accent); font-size: 1.21em; flex: 1 1 230px; letter-spacing: 0.5px; }
.admin-art-date { color: #666; font-size: 1.01em; }
.admin-art-status { border-radius: 0.7em; padding: 0.16em 1.07em; font-size: 0.98em; margin-left: 1.1em; font-weight: 600;
  background: var(--admin-draft); color: #604ab5; border: none; outline: none; }
.admin-art-status.published { background: #ffe7cc; color: #e67e22; border: 1.2px solid #f4c898; }
.admin-art-status.draft { background: #e0dbfa; color: #407fb7; border: 1.2px solid #b3a4f3; }
.admin-drag-handle { font-size: 1.4em; color: var(--admin-accent); cursor: grab; margin-right: 0.7em; opacity: 0.6; transition: opacity 0.12s;}
.admin-drag-handle:hover { opacity: 1; }
.admin-art-row2 { display: flex; gap: 1.1em; margin-top: 0.8em; flex-wrap: wrap; }
.admin-actions a, .admin-actions button {
  display: flex; align-items: center; gap: 0.7em; color: #fff; background: var(--admin-accent-light); border: none;
  border-radius: 1.2em; padding: 0.56em 1.5em; font-weight: 600; cursor: pointer; font-size: 1.05em;
  box-shadow: 0 2px 8px #0001; transition: background 0.11s, scale 0.06s; outline: none;
}
.admin-actions a.admin-delete { background: var(--admin-red); }
.admin-actions a.admin-view { background: var(--admin-blue); }
.admin-actions button.admin-publish { background: var(--admin-orange); }
.admin-actions button.admin-unpublish { background: #7c2be2; }
.admin-actions a:hover, .admin-actions button:hover { filter: brightness(1.12); scale: 1.04; }
.admin-art-row2 .lang-label { font-size: 0.93em; color: #407fb7; margin-left: 1em; font-weight: 500; display: flex; flex-direction: column; gap: 2px; }


/* =============== FORMULAIRES (édition/ajout) ================= */
.admin-container form {
  background: #fff; border-radius: 16px; box-shadow: 0 2px 18px #0001;
  padding: 2.3em 2em 1.2em 2em; border: 2px solid #236575; width: 99%; margin: 0 auto;
}
.admin-container label { font-weight: 600; color: #236575; margin-bottom: 0.3em; display: block; letter-spacing: 0.5px; }
.admin-container input[type="text"], .admin-container input[type="date"], .admin-container textarea, .admin-container select {
  width: 100%; padding: 0.65em 0.9em; border-radius: 8px; border: 1.4px solid #b4c5cc; font-size: 1.07em; margin-bottom: 1.15em; font-family: 'Montserrat', Arial, sans-serif; background: #f8fafb; transition: border 0.14s;
}
.admin-container textarea { min-height: 90px; resize: vertical; }
.admin-container input:focus, .admin-container textarea:focus, .admin-container select:focus {
  border: 1.6px solid #236575; outline: none; background: #f1f5f7;
}


/* =============== IMAGES EN ADMIN (UPLOAD, MINIATURES) =============== */
.multi-img-block { margin-bottom: 1.4em; width: 100%; }
.img-list { display: flex; flex-wrap: wrap; gap: 1em; margin-top: 0.7em; width: 100%; }
.img-item {
  position: relative; display: flex; flex-direction: column; align-items: center;
  background: #f6f9fa; border: 1px solid #c8d9df; border-radius: 7px;
  padding: 0.5em 0.7em 0.7em 0.7em; min-width: 130px; min-height: 110px; margin-bottom: 0.7em;
}
.img-item img {
  max-width: 130px; max-height: 110px; border-radius: 8px; object-fit: cover; display: block;
}
.img-delete-btn {
  position: absolute; top: 7px; right: 8px; background: none; border: none; width: 23px; height: 23px; cursor: pointer; z-index: 2; padding: 0;
}
.img-delete-btn:hover::after { color: #a11400; }
.img-controls { margin-top: 0.5em; display: flex; gap: 0.6em; }
.img-controls select, .img-controls button { font-size: 0.97em; padding: 0.35em 0.7em; border-radius: 6px; border: 1px solid #c2cfd2; background: #f8fafb; }


/* =============== APERÇU D’ARTICLE ADMIN : RENDU FINAL IDENTIQUE AU PUBLIC =============== */
#article-preview {
    max-width: 1000px;   /* Même largeur que .blog-post sur le blog */
    width: 100%;
    margin: 0 auto;
    background: none;
    padding: 0;
}
/* ** Important : forcer la bulle admin à ressembler au public ** */
#article-preview .blog-post {
    background: #fff;
    margin-bottom: 2.2em;
    padding: 2.2em 2.2em 1.7em 2.2em;
    border-radius: 1.3em;
    border: none;
    box-shadow: 0 2px 14px #0002;
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
    box-sizing: border-box;
}
#article-preview .blog-images {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-bottom: 1.2em;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}
#article-preview .blog-img {
    width: 100%;
    max-width: 320px;
    min-width: 50px;
    height: auto;
    border-radius: 1em;
    box-shadow: 0 1px 10px #0001;
    object-fit: contain;  /* Jamais coupée */
    display: block;
    margin-bottom: 1em;
    overflow: hidden;
}

/* Empêche le style img-thumb de polluer la preview blog ! */
#article-preview .img-thumb {
  display: none !important;
}

/* Titre, texte, date : style blog */
#article-preview .blog-content {
    font-size: 1.09em;
    margin-bottom: 1.2em;
    line-height: 1.7;
    flex: 1 1 auto;
}
#article-preview .blog-date {
    color: #777;
    font-size: 0.98em;
    text-align: right;
    margin-top: 1em;
    margin-bottom: 0;
    align-self: flex-end;
}
#article-preview .img-left   { align-self: flex-start; }
#article-preview .img-right  { align-self: flex-end; margin-left:auto;}
#article-preview .img-center { align-self: center; margin-left:auto; margin-right:auto; }
#article-preview .blog-post, #article-preview .blog-images, #article-preview .blog-img { overflow: hidden; }

/* ================== BOUTON RETOUR ====================== */
.btn-back {
  color: #236575 !important; text-decoration: none; font-size: 1.05em;
  border-radius: 6px; padding: 0.35em 1.1em; border: 1.3px solid #236575;
  margin-bottom: 1.4em; background: #eaf2f5; font-weight: 600; transition: background 0.14s; display: inline-block;
}
.btn-back:hover { background: #d0e0e7; }

/* ================== RESPONSIVE ========================= */
@media (max-width: 1150px) {
  .admin-container { padding: 1.1em 0.7em 2em 0.7em; }
}
@media (max-width: 800px) {
  .admin-container { padding: 1.1em 0.4em 2em 0.4em; }
  .admin-article-list li { padding: 1.1em 0.6em 0.6em 0.6em; }
  .admin-add-btn { bottom: 12vw; right: 3vw; }
  .admin-header { flex-direction: column; gap: 1.5em; }
  .admin-container form { padding: 1.1em 0.4em 1.1em 0.4em; }
  #article-preview { padding: 1em 0.5em; }
  #article-preview .blog-post { max-width: 99vw; }
  #article-preview .blog-img { max-width: 95vw; }
}
@media (max-width: 650px) {
  .admin-art-row1, .admin-art-row2 { flex-direction: column; gap: 0.8em; }
}
@media (max-width: 570px) {
  .admin-art-row1, .admin-art-row2 { flex-direction: column; gap: 0.5em; }
  #article-preview .blog-img { max-width: 98vw; }
}

/* ===== ANIMATIONS micro-soulignement sur hover ===== */
.admin-actions a::after, .admin-actions button::after {
  content: ""; display: block; margin: 0 auto;
  border-bottom: 2.5px solid #fff2;
  width: 0; transition: width 0.16s;
}
.admin-actions a:hover::after, .admin-actions button:hover::after { width: 95%; }

/* ----------- Zone textarea avec bouton agrandir ----------- */
.textarea-with-expand {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 6px;
}
.expand-btn {
    background: #236575;
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 0.32em 0.65em;
    font-size: 1.11em;
    cursor: pointer;
    margin-bottom: 3px;
    box-shadow: 0 1px 6px #0001;
    transition: background 0.16s, scale 0.09s;
}
.expand-btn:hover { background: #e67e22; scale: 1.06; }

.textarea-modal-bg {
    position: fixed;
    top:0; left:0; width:100vw; height:100vh;
    background: #0008;
    z-index: 9998;
    display: flex; align-items: center; justify-content: center;
}
.textarea-modal {
    background: #fff;
    border-radius: 17px;
    padding: 2em 2.1em 1.5em 2.1em;
    box-shadow: 0 12px 68px #0003;
    max-width: 96vw;
    max-height: 90vh;
    min-width: 390px;
    display: flex; flex-direction: column; align-items: stretch;
}
.textarea-modal textarea {
    width: 65vw;
    max-width: 900px;
    min-width: 260px;
    min-height: 43vh;
    max-height: 65vh;
    padding: 1.3em;
    font-size: 1.1em;
    border-radius: 9px;
    border: 1.5px solid #b5d5c5;
    box-shadow: 0 2px 10px #30824e22;
    font-family: 'Montserrat', Arial, sans-serif;
    resize: both;
    margin-bottom: 1.1em;
}
@media (max-width: 700px) {
    .textarea-modal textarea { width: 92vw; min-width: 90px; }
    .textarea-modal { padding: 0.6em; min-width: unset; }
}
.textarea-modal-topbar {
    display: flex; justify-content: flex-end; margin-bottom: 0.7em;
}
.close-modal-btn {
    background: #236575; color: #fff; border: none; border-radius: 5px;
    padding: 0.32em 1.1em; font-size: 1.16em; cursor: pointer;
    transition: background 0.13s;
    margin-left: 1em;
}
.close-modal-btn:hover { background: #d1442a; }