/* =========================================================================
   membership-responsive.css
   Responsive/mobile per il FUNNEL ABBONAMENTO SHOPenauer.
   Pagine: /membership/  -> home, input_email, pricing, pricing_brand,
           pricing_outlet, pricing_showroom, register_form, checkout, profile.

   Caricato DOPO global.css e SOLO su queste pagine: gli override vincono
   per ordine-sorgente (stessa specificita a classe singola) e non toccano
   il resto del sito. Aggiunto 2026-07-10 (A4-3, pricing mobile-friendly).
   Breakpoint 768px = allineato al "xs" gia usato dal sito (hidden-xs).
   ========================================================================= */

/* --- ICONE CATEGORIE (home.php): SVG inline al posto dei glifi font ---
   Il font custom shopenauer_icons aveva spessori disomogenei e NESSUN glifo
   shopping-mall (si ripiegava su FontAwesome pieno). Le 4 icone ora sono SVG
   inline in home.php con tratto unico; qui si spengono i vecchi :before.
   NB: il menu mobile usa ancora i glifi font (global.css) e non c'entra. */
.pricing_item_menu:before {
  content: none !important;
}
/* Icona della realta accanto al titolo dei listini */
.pricing_title_text svg.pricing_title_icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  vertical-align: -6px;
  margin-right: 10px;
}

/* Parola della realta nel titolo dei listini: senape SHOPenauer */
.pricing_title_text .pricing_title_kind {
  color: #b19a00;
}

/* Link alle altre realta nel sottotitolo dei listini */
.pricing_subtitle_text a {
  color: #1B004D;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pricing_item_menu svg.pricing_icon {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
}

@media (max-width: 768px) {

  /* --- home.php: le 4 categorie (Store/Brand/Shopping-mall/Showroom) ---
     Erano in fila flex (200px ciascuna) -> sforavano lo schermo.
     Ora vanno a capo, 2 per riga. */
  .pricing_title_text svg.pricing_title_icon {
    width: 30px;
    height: 30px;
    vertical-align: -4px;
    margin-right: 6px;
  }
  .pricing_item_menu svg.pricing_icon {
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
  }
  #emailForm {
    flex-wrap: wrap;
    justify-content: center;
  }
  #emailForm .pricing_item_menu {
    width: 42%;
    max-width: 42%;
    margin: 14px 3% 0 3%;
    box-sizing: border-box;
    font-size: 16px;
    word-break: break-word;
  }

  /* Rete di sicurezza: nessuno scroll orizzontale su queste pagine
     (il file e caricato SOLO sul funnel, quindi body/html qui e sicuro). */
  html, body {
    overflow-x: hidden;
  }
  /* I flex-item hanno min-width:auto e non si restringono sotto la larghezza
     del contenuto -> forziamo min-width:0 cosi il testo lungo va a capo. */
  .pricing_membership,
  .pricing_membership_container,
  .pricing_membership_special_container,
  .pricing_title,
  .pricing_switch_container,
  .pricing_title_annual_container,
  .form_row,
  .membership_form_container {
    min-width: 0;
  }
  /* Il testo lungo (voci premium, descrizioni) deve andare a capo */
  .pricing_membership_premium_item_bold,
  .pricing_membership_premium_item,
  .pricing_membership_annual_price_description,
  .pricing_spr_description,
  .membershipChkLabel {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* ---- Fix overflow orizzontale: gli elementi a width:100% hanno padding
     laterale (bottoni 50px, input 20-35px). Senza border-box sforano il
     viewport e spingono tutta la pagina oltre 390px (titoli "tagliati").
     border-box fa rientrare il padding nel 100%. ---- */
  .membership_form_button,
  .membership_form_input,
  .membership_form_code,
  .membership_form_area,
  .membershipFormText,
  .pricing_membership_start,
  .pricing_membership_start_bottom,
  .pricing_spr_request,
  .pricing_membership_container,
  .pricing_membership_special_container,
  .pricing_membership_title_container,
  .pricing_membership_premium_content {
    box-sizing: border-box;
    max-width: 100%;
  }
  /* Riduco un po' il padding orizzontale dei bottoni su mobile */
  .membership_form_button,
  .pricing_membership_start,
  .pricing_membership_start_bottom,
  .pricing_spr_request {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* ---- Header pricing: titolo + switch mensile/annuale impilati ---- */
  .pricing_container {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 24px;
    padding-bottom: 24px;
    overflow-x: hidden; /* rete di sicurezza contro residui di overflow */
  }
  .pricing_title {
    flex-direction: column;
    align-items: flex-start;
  }
  .pricing_title_text {
    font-size: 23px;
    line-height: 1.2;
    word-break: break-word;
  }
  /* La freccia decorativa e uno switch da 800px fissi: solo nel pricing.
     NON tocco le altre .arrow del sito (header/menu/admin). */
  .pricing_title .arrow,
  .pricing_switch_container .arrow {
    display: none;
  }
  .pricing_switch_container {
    width: 100%;
    max-width: 100%;
    margin-top: 24px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  /* "Annuale" e il testo sconto impilati (era la causa dell'overflow a 390px:
     il testo restava inline e chiedeva ~460px di larghezza minima) */
  .pricing_title_annual_container {
    flex-direction: column;
    align-items: flex-start;
  }
  .pricing_title_annual_discount_container {
    position: static;
    right: auto;
    top: auto;
    margin-top: 4px;
    max-width: 100%;
  }
  .pricing_title_annual_discount_header,
  .pricing_title_annual_discount_content {
    white-space: normal;
  }

  /* ---- Le 4 colonne dei piani -> stack verticale ---- */
  .pricing_membership {
    flex-direction: column;
    margin-top: 30px;
  }
  .pricing_membership_container,
  .pricing_membership_special_container {
    width: 100%;
    /* i bordi laterali diventano separatori tra righe */
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 1px;
    border-bottom-color: #c5c5c5;
    border-bottom-style: solid;
    margin-top: 0;
    margin-bottom: 0;
  }
  /* Altezze fisse -> auto: niente testo tagliato ne buchi enormi */
  .pricing_membership_title_container,
  .pricing_membership_top {
    height: auto;
  }
  .pricing_membership_premium_content {
    padding-bottom: 24px;
  }
  /* Bottone "start" in fondo: da assoluto a statico nel flusso */
  .pricing_membership_start_bottom {
    position: static;
    width: 100%;
    margin-top: 16px;
    left: auto;
    right: auto;
    bottom: auto;
  }
  /* Colonna scura "special request" */
  .pricing_spr_pg1 {
    margin-top: 24px;
    margin-bottom: 24px;
  }
  /* Titolo posizionato in assoluto sopra le colonne -> statico */
  .price_title_container {
    position: static;
    left: auto;
    right: auto;
    top: auto;
  }

  /* ---- Form (input_email / register / checkout / profile) ---- */
  .membership_container {
    margin-top: 40px;
  }
  .membership_title_text {
    font-size: 24px;
    line-height: 1.2;
    padding: 0 12px;
  }
  .membership_subtitle_text {
    padding: 0 12px;
  }
  .membership_form {
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 60px;
  }
  .membership_form_extend {
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 60px;
  }
  /* Input affiancati (form_row = solo membership) -> impilati */
  .form_row {
    flex-direction: column;
  }
  .membership_form_container {
    padding: 0px 5px 0px 5px;
  }
  .button_container {
    padding-left: 5px;
  }
}