/* ==========================================================
   PERSONALIZZA MOBILE – BASE PULITA
   ========================================================== */
@media (max-width: 768px) {

  html,
  body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  body.personalizza-page {
    width: 100%;
    overflow-x: hidden;
  }

   #configuratore-led {
    display: flex;
    flex-direction: column;
    padding: 62px 16px 32px;
    box-sizing: border-box;
    gap: 12px;
  }

  #configuratore-led > * {
    width: 100%;
    box-sizing: border-box;
  }

  /* ===== ANTEPRIMA ===== */
  .preview-container {
  position: relative;

  width: calc(100vw - 12px);

  max-width: 520px;

  aspect-ratio: 1 / 1;

  margin: 6px auto 24px;

  border-radius: 14px;
  overflow: hidden;
}

/* =====================================================
   MOBILE - DROPDOWN VARIANTE C
   ===================================================== */

@media (max-width: 768px) {
  #configuratore-led .font-group,
  #configuratore-led .size-group {
    position: relative !important;
    width: var(--mobile-font-select-width, calc(100vw - 64px)) !important;
    max-width: min(520px, calc(100vw - 64px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 6px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #171717, #373737 58%, #c2a562) !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16) !important;
  }

  #configuratore-led .font-group::after,
  #configuratore-led .size-group::after {
    content: "";
    position: absolute;
    right: 24px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid #171717;
    border-bottom: 2px solid #171717;
    transform: translateY(-68%) rotate(45deg);
    pointer-events: none;
  }

  #configuratore-led .font-group select,
  #configuratore-led .size-group select,
  body.personalizza-page #fontSelect,
  body.personalizza-page #dimensioneSelect {
    width: 100% !important;
    max-width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 54px 0 18px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #171717 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
  }
}

@media (max-width: 768px) {
  body.personalizza-page #configuratore-led .foto-esempi-section {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.personalizza-page #configuratore-led .foto-esempi-scroll {
    width: 100vw !important;
    max-width: 100vw !important;
    gap: 12px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.personalizza-page #configuratore-led .foto-esempi-scroll img {
    flex: 0 0 78% !important;
    width: 78% !important;
    max-width: 78% !important;
    border-radius: 14px !important;
  }
}

  /* ===== SFONDI ===== */
  .sfondi-wrapper {
    margin: 0 0 18px;
  }

  .sfondi {
    display: flex;
    justify-content: center;
    gap: 14px;
  }

  .sfondo-thumb {
    width: 64px;
    height: 64px;
    border-radius: 10px;
  }

  /* ===== TITOLI CATEGORIE ===== */
  .label,
  .optional-title,
  .foto-esempi-title {
    position: relative;
    display: block;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    margin: 28px 0 18px;
    letter-spacing: 0.3px;
    color: #222;
  }

  .label::after,
  .optional-title::after,
  .foto-esempi-title::after {
    content: "";
    display: block;
    width: 42px;
    height: 2px;
    margin: 10px auto 0;
    background: linear-gradient(90deg, transparent, #000, transparent);
    opacity: 0.22;
  }

  #configuratore-led > h2:not(.optional-title):not(.foto-esempi-title) {
    margin: 10px 0 14px;
    text-align: center;
  }

  /* ===== TESTO ===== */
  #customText {

  width: calc(100vw - 36px);

  min-height: 74px;

  padding: 18px 18px;

  margin: 0 auto 22px;

  font-size: 20px;
  line-height: 1.4;

  border-radius: 16px;

  box-sizing: border-box;

  resize: none;
}

  .field-group {
    margin-bottom: 26px;
  }

  select,
  textarea,
  button {
    font-size: 16px;
  }

  /* ===== COLORI LED ===== */
  #colorButtons {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(72px, 1fr));
    gap: 62px 22px;
    width: 100%;
    margin: 16px 0 30px;
    justify-items: center;
    align-items: start;
    position: relative;
  }

  #colorButtons::before {
    content: none;
    display: none;
  }

  .color-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    border: 2px solid #ccc;
  }

  .color-btn::after {
    content: attr(data-name);
    position: absolute;
    top: 48px;
    left: 50%;
    transform: translateX(-50%);
    width: 76px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: #333;
    line-height: 1.15;
    white-space: normal;
  }

  /* ===== ORDINE BLOCCHI MOBILE ===== */
  .preview-container {
    order: 1;
  }

  .sfondi-wrapper {
    order: 2;
  }

  #configuratore-led > h2 {
    order: 3;
  }

  #customText {
    order: 4;
  }

  .field-group {
    order: 5;
  }

  #colorButtons {
    order: 6;
  }

  .size-group {
    order: 7;
  }

  .optional-section {
    order: 8;
  }

  .plexi-group {
    order: 9;
  }

  #prezzo {
    order: 10;
  }

  #addToCartBtn {
    order: 11;
  }

  #goToCartBtn {
    order: 12;
  }

  .delivery-info-card {
    order: 13;
  }

  .custom-file-banner {
    order: 14;
  }

  .foto-esempi-section {
    order: 15;
  }

  footer {
    order: 16;
  }

  /* ===== SEZIONI ===== */
  .size-group,
  .plexi-group,
  .optional-section,
  #prezzo,
  .delivery-info-card,
  .custom-file-banner,
  #addToCartBtn,
  #goToCartBtn {
    margin-top: 0;
  }

  .optional-title {
    text-align: center;
    margin: 20px 0 14px;
  }

  .optional-section,
  .plexi-group {
    margin-bottom: 26px;
  }

  .plexi-options-grid {
    gap: 20px;
  }

  /* ===== PREZZO E BOTTONI ===== */
  #prezzo {
    margin: 16px 0 12px;
    text-align: center;
  }

  .delivery-info-card {
    margin: 6px auto 18px;
    width: min(100%, 430px);
    max-width: 430px;
    text-align: center;
  }

  .custom-file-banner {
    margin: 0 auto 22px;
    width: min(100%, 430px);
    max-width: 430px;
  }

  #addToCartBtn,
  #goToCartBtn {
    margin-top: 12px;
  }

  /* ==========================================================
     FOTO ESEMPI
     ========================================================== */
  .foto-esempi-section {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-top: 34px;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
  }

  .foto-esempi-title {
    margin: 0 0 8px;
    text-align: center;
    font-size: 24px;
  }

  .foto-esempi-subtitle {
    margin: 0 0 16px;
    text-align: center;
    font-size: 14px;
    color: #555;
  }

  .foto-esempi-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100vw;
    padding: 4px 16px 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .foto-esempi-scroll img {
    flex: 0 0 78%;
    width: 78%;
    max-width: 78%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 14px;
    scroll-snap-align: start;
    display: block;
  }

  .foto-esempi-scroll::-webkit-scrollbar {
    display: none;
  }

  footer {
    margin-top: 28px;
    text-align: center;
    font-size: 14px;
  }
}

/* ==========================================================
   MICROREGOLAZIONI ANTEPRIMA MOBILE
   ========================================================== */
@media (max-width: 768px) {

  :root {
    --mobile-preview-width: calc(100vw - 8px);

    --mobile-preview-shift-x: -57px;
    --mobile-preview-shift-y: -40px;

    --mobile-preview-margin-top: 6px;
    --mobile-preview-margin-bottom: 24px;

    --mobile-preview-radius: 14px;
  }

  .preview-container {
    order: -999 !important;

    position: relative;
    display: block !important;

    width: var(--mobile-preview-width) !important;
    max-width: none !important;

    aspect-ratio: 1 / 1;

    margin-top: var(--mobile-preview-margin-top) !important;
    margin-bottom: var(--mobile-preview-margin-bottom) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    transform: translateX(var(--mobile-preview-shift-x))
               translateY(var(--mobile-preview-shift-y));

    overflow: hidden;
    border-radius: var(--mobile-preview-radius);

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  #preview {
    font-size: 1.45rem !important;
  }

  #plexiglass {
    border-radius: 3px !important;
  }
}



@media (max-width: 768px) {

  .sfondi-wrapper {
    order: -998 !important;

    margin-top: -6px !important;
    margin-bottom: 18px !important;
  }

}

/* ==========================================================
   MICROREGOLAZIONI SFONDI MOBILE
   ========================================================== */
@media (max-width: 768px) {

  :root {

    /* POSIZIONE BLOCCO */
    --mobile-sfondi-shift-x: 0px;
    --mobile-sfondi-shift-y: -80px;

    /* DISTANZE */
    --mobile-sfondi-margin-top: 0px;
    --mobile-sfondi-margin-bottom: 18px;

    /* FOTO */
    --mobile-sfondo-size: 64px;

    /* SPAZIO TRA FOTO */
    --mobile-sfondi-gap: 14px;

    /* BORDI */
    --mobile-sfondo-radius: 10px;
  }

  .sfondi-wrapper {

    order: -998 !important;

    margin-top: var(--mobile-sfondi-margin-top) !important;
    margin-bottom: var(--mobile-sfondi-margin-bottom) !important;

    transform:
      translateX(var(--mobile-sfondi-shift-x))
      translateY(var(--mobile-sfondi-shift-y));
  }

  .sfondi {
    gap: var(--mobile-sfondi-gap) !important;
  }

  .sfondo-thumb {

    width: var(--mobile-sfondo-size) !important;
    height: var(--mobile-sfondo-size) !important;

    border-radius: var(--mobile-sfondo-radius) !important;
  }

}

/* ==========================================================
   MICROREGOLAZIONI BOX TESTO MOBILE
   ========================================================== */
@media (max-width: 768px) {

  :root {
    --mobile-textbox-width: calc(100vw - 64px);
    --mobile-textbox-height: 78px;

    --mobile-textbox-shift-x: 0px;
    --mobile-textbox-shift-y: 0px;

    --mobile-textbox-margin-top: 0px;
    --mobile-textbox-margin-bottom: 28px;

    --mobile-textbox-radius: 16px;

    --mobile-textbox-font-size: 20px;
    --mobile-textbox-padding-x: 18px;
    --mobile-textbox-padding-y: 16px;
  }

  #customText {
    width: var(--mobile-textbox-width) !important;
    max-width: 100% !important;

    min-height: var(--mobile-textbox-height) !important;
    height: var(--mobile-textbox-height) !important;

    margin-top: var(--mobile-textbox-margin-top) !important;
    margin-bottom: var(--mobile-textbox-margin-bottom) !important;
    margin-left: auto !important;
    margin-right: auto !important;

    padding: var(--mobile-textbox-padding-y) var(--mobile-textbox-padding-x) !important;

    font-size: var(--mobile-textbox-font-size) !important;
    line-height: 1.3;

    border-radius: var(--mobile-textbox-radius) !important;

    transform:
      translateX(var(--mobile-textbox-shift-x))
      translateY(var(--mobile-textbox-shift-y));

    box-sizing: border-box !important;
    resize: none;
    display: block;
  }
}

/* ==========================================================
   MICROREGOLAZIONI BLOCCO CARATTERE MOBILE
   ========================================================== */
@media (max-width: 768px) {

  :root {
    --mobile-font-section-margin-top: 42px;
    --mobile-font-section-margin-bottom: 24px;
    --mobile-color-section-margin-top: 28px;
    --mobile-color-section-margin-bottom: 30px;
    --mobile-size-section-margin-top: 30px;
    --mobile-size-section-margin-bottom: 32px;
    --mobile-optional-section-margin-top: 36px;

    /* POSIZIONE BLOCCO */
    --mobile-font-block-shift-x: -10px;
    --mobile-font-block-shift-y: 0px;

    /* DISTANZE */
    --mobile-font-block-margin-top: 10px;
    --mobile-font-block-margin-bottom: 30px;

    /* LARGHEZZA SELECT */
    --mobile-font-select-width: calc(100vw - 64px);

    /* ALTEZZA */
    --mobile-font-select-height: 62px;

    /* BORDI */
    --mobile-font-select-radius: 14px;
  }

  #configuratore-led .config-section:has(#fontSelect) {
    margin-top: var(--mobile-font-section-margin-top) !important;
    margin-bottom: var(--mobile-font-section-margin-bottom) !important;
  }

  #configuratore-led .config-section:has(#colorButtons) {
    margin-top: var(--mobile-color-section-margin-top) !important;
    margin-bottom: var(--mobile-color-section-margin-bottom) !important;
  }

  #configuratore-led .config-section:has(#colorButtons) #colorButtons {
    margin-top: 30px !important;
    margin-bottom: 42px !important;
  }

  #configuratore-led .config-section:has(#dimensioneSelect) {
    margin-top: var(--mobile-size-section-margin-top) !important;
    margin-bottom: var(--mobile-size-section-margin-bottom) !important;
  }

  #configuratore-led .optional-section {
    margin-top: var(--mobile-optional-section-margin-top) !important;
  }

  /* CONTENITORE COMPLETO */
  .field-group {

    transform:
      translateX(var(--mobile-font-block-shift-x))
      translateY(var(--mobile-font-block-shift-y));

    margin-top: var(--mobile-font-block-margin-top) !important;

    margin-bottom: var(--mobile-font-block-margin-bottom) !important;
  }

  /* SELECT FONT */
  .field-group select {

    width: var(--mobile-font-select-width) !important;

    height: var(--mobile-font-select-height) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    display: block;

    border-radius: var(--mobile-font-select-radius) !important;
  }

}

/* ==========================================================
   OPTIONAL MOBILE – STESSO STILE DESKTOP, CENTRATO
   ========================================================== */
@media (max-width: 768px) {

  body.personalizza-page #configuratore-led .optional-section {
    width: 100vw !important;
    max-width: 100vw !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  body.personalizza-page #configuratore-led .premium-subtitle,
  body.personalizza-page #configuratore-led .premium-options-grid,
  body.personalizza-page #configuratore-led .cavo-premium-box {
    width: calc(100vw - 64px) !important;
    max-width: 330px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    box-sizing: border-box !important;
  }

  body.personalizza-page #configuratore-led .premium-subtitle {
    margin-top: 12px !important;
    margin-bottom: 14px !important;
    text-align: center !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    color: #555 !important;
  }

  body.personalizza-page #configuratore-led .premium-options-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.personalizza-page #configuratore-led .premium-option-card {
    width: 100% !important;
    min-height: 92px !important;
    padding: 16px 18px !important;
    border: 1.5px solid rgba(0,0,0,0.18) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #ffffff, #f7f7f7) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.06) !important;
    cursor: pointer !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    text-align: center !important;
    box-sizing: border-box !important;
    transition: all 0.22s ease !important;
  }

  body.personalizza-page #configuratore-led .premium-option-card:active {
    transform: scale(0.99);
  }

  body.personalizza-page #configuratore-led .optional-taglio {
    margin-top: 22px !important;
  }

  body.personalizza-page #configuratore-led .premium-option-card.selected,
  body.personalizza-page #configuratore-led .premium-check-card.selected {
    border-color: #00e5ff !important;
    color: inherit !important;
    background: linear-gradient(180deg, #f5feff, #e9fbff) !important;
    box-shadow:
      0 0 0 2px rgba(0,229,255,0.18),
      0 14px 34px rgba(0,229,255,0.22) !important;
  }

  body.personalizza-page #configuratore-led .premium-option-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111 !important;
  }

  body.personalizza-page #configuratore-led .premium-option-desc {
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: #666 !important;
    margin: 0 !important;
  }

  body.personalizza-page #configuratore-led .premium-option-price {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #00c853 !important;
    margin-top: 4px !important;
  }

  body.personalizza-page #configuratore-led .premium-check-card input {
    display: none !important;
  }

  body.personalizza-page #configuratore-led .cavo-premium-box {
    margin-top: 18px !important;
    padding: 18px !important;
    border-radius: 18px !important;
    background: #fafafa !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    text-align: center !important;
  }
}

/* Override finale: Variante C deve vincere sulle vecchie regole select */
@media (max-width: 768px) {
  :root {
    --mobile-dropdown-center-correction: -24px;
  }

  body.personalizza-page #configuratore-led .config-section:has(#fontSelect),
  body.personalizza-page #configuratore-led .config-section:has(#dimensioneSelect) {
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: center !important;
    transform: none !important;
  }

  body.personalizza-page #configuratore-led .font-group,
  body.personalizza-page #configuratore-led .size-group {
    position: relative !important;
    width: var(--mobile-font-select-width, calc(100vw - 64px)) !important;
    max-width: min(520px, calc(100vw - 64px)) !important;
    box-sizing: border-box !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
    transform: translateX(var(--mobile-dropdown-center-correction)) !important;
    padding: 6px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #171717, #373737 58%, #c2a562) !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16) !important;
  }

  body.personalizza-page #configuratore-led .font-group::after,
  body.personalizza-page #configuratore-led .size-group::after {
    content: "" !important;
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    width: 9px !important;
    height: 9px !important;
    border-right: 2px solid #171717 !important;
    border-bottom: 2px solid #171717 !important;
    transform: translateY(-68%) rotate(45deg) !important;
    pointer-events: none !important;
  }

  body.personalizza-page #configuratore-led .font-group select,
  body.personalizza-page #configuratore-led .size-group select {
    width: 100% !important;
    max-width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 54px 0 18px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #171717 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
  }
}