/* ==========================================================
   PERSONALIZZA IPAD / TABLET
   Breakpoint dedicato: 700px - 1180px
   ========================================================== */

@media (min-width: 700px) and (max-width: 1180px) {

  html,
  body {
    overflow-x: hidden !important;
  }

  body.personalizza-page #configuratore-led {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 28px !important;
    width: 100% !important;
    max-width: 820px !important;
    margin: 0 auto 0 !important;
    padding: 0 34px 48px !important;
    box-sizing: border-box !important;
  }

  body.personalizza-page #configuratore-led > * {
    width: 100% !important;
    max-width: 680px !important;
    box-sizing: border-box !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
  }

  body.personalizza-page .preview-container,
  body.personalizza-page #configuratore-led .preview-container {
    order: 1 !important;
    width: min(78vw, 680px) !important;
    max-width: 680px !important;
    margin: 0 auto 10px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 18px !important;
    justify-self: center !important;
  }

  body.personalizza-page #preview {
    font-size: 1.35rem !important;
    text-align: center !important;
    white-space: pre-wrap !important;
  }

  body.personalizza-page #configuratore-led .sfondi-wrapper {
    order: 2 !important;
    width: min(78vw, 680px) !important;
    max-width: 680px !important;
    margin: -2px auto 18px !important;
  }

  body.personalizza-page #configuratore-led .sfondi {
    display: flex !important;
    justify-content: center !important;
    gap: 18px !important;
    overflow-x: auto !important;
  }

  body.personalizza-page #configuratore-led .sfondo-thumb {
    width: 92px !important;
    height: 92px !important;
    border-radius: 14px !important;
    flex: 0 0 auto !important;
  }

  body.personalizza-page #configuratore-led .config-section,
  body.personalizza-page #configuratore-led #avvisoDimensione,
  body.personalizza-page #configuratore-led #prezzo,
  body.personalizza-page #configuratore-led #addToCartBtn,
  body.personalizza-page #configuratore-led #goToCartBtn,
  body.personalizza-page #configuratore-led .delivery-info-card,
  body.personalizza-page #configuratore-led .custom-file-banner,
  body.personalizza-page #configuratore-led .foto-esempi-section {
    width: min(82vw, 560px) !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  body.personalizza-page #configuratore-led .config-section:has(#customText),
  body.personalizza-page #configuratore-led .config-section:has(#fontSelect),
  body.personalizza-page #configuratore-led .config-section:has(#colorButtons),
  body.personalizza-page #configuratore-led .config-section:has(#dimensioneSelect),
  body.personalizza-page #configuratore-led .optional-section {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: center !important;
  }

  body.personalizza-page #configuratore-led .config-section:has(#customText) {
    order: 3 !important;
  }

  body.personalizza-page #configuratore-led .config-section:has(#fontSelect) {
    order: 4 !important;
  }

  body.personalizza-page #configuratore-led .config-section:has(#colorButtons) {
    order: 5 !important;
  }

  body.personalizza-page #configuratore-led .config-section:has(#dimensioneSelect) {
    order: 6 !important;
  }

  body.personalizza-page #configuratore-led .optional-section {
    order: 7 !important;
  }

  body.personalizza-page #configuratore-led #prezzo {
    order: 8 !important;
  }

  body.personalizza-page #configuratore-led #addToCartBtn {
    order: 9 !important;
  }

  body.personalizza-page #configuratore-led #goToCartBtn {
    order: 10 !important;
  }

  body.personalizza-page #configuratore-led .delivery-info-card {
    order: 11 !important;
  }

  body.personalizza-page #configuratore-led .custom-file-banner {
    order: 12 !important;
  }

  body.personalizza-page #configuratore-led .foto-esempi-section {
    order: 13 !important;
  }

  body.personalizza-page #configuratore-led .config-section {
    margin-bottom: 34px !important;
  }

  body.personalizza-page #configuratore-led .config-section:has(#customText),
  body.personalizza-page #configuratore-led .config-section:has(#fontSelect),
  body.personalizza-page #configuratore-led .config-section:has(#colorButtons),
  body.personalizza-page #configuratore-led .config-section:has(#dimensioneSelect) {
    margin-top: 14px !important;
    margin-bottom: 42px !important;
  }

  body.personalizza-page #configuratore-led .pill-title,
  body.personalizza-page #configuratore-led .config-title {
    width: 100% !important;
    min-height: 54px !important;
    margin: 0 auto 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 1.05rem !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
  }

  body.personalizza-page #customText,
  body.personalizza-page #fontSelect,
  body.personalizza-page #dimensioneSelect {
    width: 100% !important;
    min-height: 56px !important;
    height: 56px !important;
    margin: 0 auto !important;
    font-size: 17px !important;
    box-sizing: border-box !important;
  }

  body.personalizza-page #customText {
    height: 92px !important;
    min-height: 92px !important;
    padding: 18px 22px !important;
    text-align: center !important;
    resize: none !important;
  }

  body.personalizza-page #colorButtons {
    display: grid !important;
    grid-template-columns: repeat(4, 44px) !important;
    justify-content: center !important;
    justify-items: center !important;
    gap: 54px 64px !important;
    width: 100% !important;
    margin: 22px auto 52px !important;
  }

  body.personalizza-page .color-btn {
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.personalizza-page .color-btn::after {
    width: 86px !important;
    top: 50px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  body.personalizza-page #configuratore-led .optional-section {
    width: min(82vw, 560px) !important;
    max-width: 560px !important;
    margin: 34px auto 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !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: min(82vw, 520px) !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

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

  body.personalizza-page #configuratore-led .premium-option-card {
    min-height: 98px !important;
    border-radius: 18px !important;
  }

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

  body.personalizza-page #configuratore-led .cavo-premium-box {
    margin-top: 20px !important;
    border-radius: 18px !important;
  }

  body.personalizza-page #prezzo {
    margin-top: 10px !important;
    font-size: 22px !important;
  }

  body.personalizza-page #addToCartBtn,
  body.personalizza-page #goToCartBtn {
    width: min(82vw, 520px) !important;
    max-width: 520px !important;
    min-height: 58px !important;
    margin: 0 auto !important;
  }

  body.personalizza-page #configuratore-led .delivery-info-card {
    width: min(82vw, 620px) !important;
    max-width: 620px !important;
    margin: 8px auto 28px !important;
    text-align: center !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
  }

  body.personalizza-page #configuratore-led .custom-file-banner {
    width: min(82vw, 620px) !important;
    max-width: 620px !important;
    margin: 0 auto 34px !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
  }

  body.personalizza-page .foto-esempi-section {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-top: 64px !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
  }

  body.personalizza-page .foto-esempi-scroll {
    display: flex !important;
    gap: 18px !important;
    overflow-x: auto !important;
    padding: 8px 24px 16px !important;
    width: 100vw !important;
    scroll-snap-type: x mandatory !important;
  }

  body.personalizza-page .foto-esempi-scroll img {
    flex: 0 0 42% !important;
    width: 42% !important;
    max-width: 42% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    scroll-snap-align: start !important;
  }

  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: 18px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  body.personalizza-page #configuratore-led .foto-esempi-scroll img {
    flex: 0 0 42% !important;
    width: 42% !important;
    max-width: 42% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }
}

/* =====================================================
   IPAD - DROPDOWN VARIANTE C
   ===================================================== */

@media (min-width: 700px) and (max-width: 1180px) {
  body.personalizza-page #configuratore-led .font-group,
  body.personalizza-page #configuratore-led .size-group {
    position: relative !important;
    width: min(100%, 360px) !important;
    max-width: 360px !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 15px 30px rgba(0, 0, 0, 0.16) !important;
  }

  body.personalizza-page #configuratore-led .font-group::after,
  body.personalizza-page #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;
  }

  body.personalizza-page #configuratore-led .font-group select,
  body.personalizza-page #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;
  }
}