/* ===================================================== */
/* WoS Battle – Social request form (2025 – refined UI)  */
/* ===================================================== */

.social-request-form{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.social-request-form select.wo-input {
  min-height: 48px;              /* même hauteur que les inputs texte */
  padding: 12px 14px;
  font-size: 1rem;
  border-radius: var(--r-sm);

  background-color: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);

  /* Supprime l’effet "fin et cheap" */
  line-height: 1.2;
}

/* Focus cohérent avec le reste du site */
.social-request-form select.wo-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

/* ===================================================== */
/* Sections / Cards                                      */
/* ===================================================== */

.social-block{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px;
  box-shadow:var(--shadow);
}

.social-block__title{
  font-size:1.05rem;
  font-weight:700;
  margin:0 0 14px;
  color:var(--text);
}

/* ===================================================== */
/* Platform sections                                     */
/* ===================================================== */

.platform-fields{
  display:block;
}

.platform-fields.is-hidden{
  display:none;
}

/* ===================================================== */
/* Inputs / Select / Textarea                             */
/* ===================================================== */

.wo-input,
select.wo-input,
textarea.wo-input{
  width:100%;
  border-radius:12px;
  border:1px solid var(--line);          /* ⬅️ border doux WoS */
  box-shadow:var(--shadow);
  background:color-mix(in srgb, var(--surface) 92%, white);
  transition:
    border-color var(--speed),
    box-shadow var(--speed),
    background-color var(--speed);
}

/* DARK MODE */
@media (prefers-color-scheme: dark){
  .wo-input,
  select.wo-input,
  textarea.wo-input{
    background:color-mix(in srgb, var(--surface) 94%, black);
  }
}

/* FOCUS WoS */
.wo-input:focus,
select.wo-input:focus,
textarea.wo-input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

/* ===================================================== */
/* Champs TEXTE simples (Titre / Lien)                   */
/* ===================================================== */

input.wo-input{
  min-height:48px;              /* ⬅️ PLUS HAUT */
  padding:.75rem .9rem;
  font-size:1rem;
}

/* ===================================================== */
/* Textarea Description                                  */
/* ===================================================== */

textarea.wo-input{
  min-height:150px;
  resize:vertical;
  line-height:1.5;
  padding:.8rem .9rem;
}

/* ===================================================== */
/* Grid layout (Titre / Lien côte à côte)                 */
/* ===================================================== */

.social-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

@media (min-width:768px){
  .social-grid{
    grid-template-columns:1fr 1fr;
  }
  .social-grid .full{
    grid-column:1 / -1;
  }
}

/* ===================================================== */
/* Checkboxes                                            */
/* ===================================================== */

.wo-checkbox{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.95rem;
  line-height:1.45;
  color:var(--text);
}

.wo-checkbox input{
  margin-top:4px;
  flex:0 0 auto;
}

/* ===================================================== */
/* Helper text                                           */
/* ===================================================== */

.wo-text-muted{
  font-size:.9rem;
  color:var(--text-2);
}

/* ===================================================== */
/* Confirmations                                         */
/* ===================================================== */

.social-confirmations{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* ===================================================== */
/* Submit area                                           */
/* ===================================================== */

.social-submit{
  display:flex;
  justify-content:flex-end;
  margin-top:6px;
}

.social-submit .wo-btn{
  padding:.75rem 1.6rem;
  font-size:1rem;
  border-radius:12px;
}

/* Mobile → bouton full width */
@media (max-width:600px){
  .social-submit{
    justify-content:stretch;
  }
  .social-submit .wo-btn{
    width:100%;
  }
}

/* ===================================================== */
/* Mobile refinements                                    */
/* ===================================================== */

@media (max-width:480px){
  .social-block{
    padding:16px;
  }
}

/* ===================================================== */
/* File input (clean & WoS-like)                          */
/* ===================================================== */

input[type="file"].wo-input{
  padding:.55rem .6rem;
  background:var(--surface);
}

input[type="file"].wo-input::file-selector-button{
  margin-right:10px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:.45rem .8rem;
  background:var(--surface-2);
  cursor:pointer;
  transition:
    background var(--speed),
    border-color var(--speed),
    transform .08s ease;
}

input[type="file"].wo-input::file-selector-button:hover{
  background:color-mix(in srgb, var(--primary) 10%, var(--surface));
  border-color:color-mix(in srgb, var(--primary) 35%, var(--line));
  transform:translateY(-1px);
}