/* Capri Blu Totem - v0.4.29
   Personalizzazione prodotto + modal ingredienti coerente con stile Capri Blu */

.cb-product-gallery-action-row {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr);
  gap: 12px;
  width: 100%;
}

.cb-product-gallery-customize,
.cb-product-gallery-add {
  min-height: 58px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.cb-product-gallery-customize {
  border: 1px solid rgba(255, 244, 205, .75);
  background: rgba(4, 37, 62, .54);
  color: #fff7dd !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.cb-product-gallery-customize:hover,
.cb-product-gallery-customize:focus-visible {
  background: rgba(255, 244, 205, .13);
  box-shadow: 0 9px 24px rgba(0,0,0,.18);
  transform: translateY(-1px);
}

/* Modal esistente per ingredienti / note */
#product-modal.product-modal {
  z-index: 10050;
}

#product-modal .product-modal-backdrop {
  background: rgba(2, 18, 31, .80) !important;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

#product-modal .product-modal-card {
  width: min(760px, calc(100vw - 28px));
  max-height: min(86vh, 860px);
  overflow-y: auto;
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  background: linear-gradient(145deg, rgba(8,50,82,.97), rgba(4,32,54,.96)) !important;
  color: #fff !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.46) !important;
  padding: 30px !important;
  scrollbar-width: thin;
}

#product-modal .brand {
  color: #fff0bd !important;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 800;
}

#product-modal #product-modal-title {
  color: #fff !important;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.02;
  margin: 8px 48px 8px 0;
}

#product-modal .product-modal-description,
#product-modal .pizza-options-heading p,
#product-modal .options-placeholder p,
#product-modal .note-field small {
  color: rgba(255,255,255,.76) !important;
}

#product-modal .product-modal-close {
  width: 46px;
  height: 46px;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  background: rgba(0,0,0,.15) !important;
  color: #fff !important;
  font-size: 26px;
}

#product-modal .pizza-options-section,
#product-modal .options-placeholder,
#product-modal .note-field,
#product-modal .product-modal-summary {
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.055) !important;
  border-radius: 18px !important;
}

#product-modal .pizza-options-section,
#product-modal .options-placeholder {
  padding: 18px !important;
}

#product-modal .pizza-options-heading strong,
#product-modal .options-placeholder strong,
#product-modal .note-field span,
#product-modal .product-modal-summary span,
#product-modal .product-modal-summary strong {
  color: #fff !important;
}

#product-modal .pizza-options-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
  margin-top: 14px;
}

#product-modal .pizza-options-grid > *,
#product-modal .pizza-options-grid button,
#product-modal .pizza-options-grid label {
  border-radius: 14px !important;
}

#product-modal .pizza-options-grid button,
#product-modal .pizza-options-grid label,
#product-modal .pizza-option,
#product-modal .pizza-option-button {
  min-height: 54px;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(2,31,52,.58) !important;
  color: #fff !important;
  box-shadow: none !important;
}

#product-modal .pizza-options-grid button:hover,
#product-modal .pizza-options-grid button:focus-visible,
#product-modal .pizza-options-grid label:hover {
  border-color: rgba(255,238,178,.85) !important;
  background: rgba(255,238,178,.11) !important;
}

#product-modal .pizza-options-grid .selected,
#product-modal .pizza-options-grid [aria-pressed="true"],
#product-modal .pizza-options-grid input:checked + label {
  border-color: #f2c65c !important;
  background: rgba(242,198,92,.20) !important;
  color: #fff5d7 !important;
}

#product-modal .clear-pizza-options {
  border: 1px solid rgba(255,255,255,.28) !important;
  background: transparent !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
}

#product-modal .gluten-warning {
  margin-top: 14px;
  border: 1px solid rgba(242,198,92,.55) !important;
  background: rgba(242,198,92,.10) !important;
  color: #fff0bd !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
}

#product-modal #product-note {
  width: 100%;
  margin-top: 8px;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(0,20,36,.48) !important;
  color: #fff !important;
  padding: 13px 14px !important;
  outline: none;
}

#product-modal #product-note::placeholder {
  color: rgba(255,255,255,.45) !important;
}

#product-modal #product-note:focus {
  border-color: #f2c65c !important;
  box-shadow: 0 0 0 3px rgba(242,198,92,.14) !important;
}

#product-modal .product-modal-summary {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px !important;
  margin-top: 14px;
}

#product-modal .product-modal-summary strong {
  color: #fff0bd !important;
  font-size: 24px;
}

#product-modal .product-modal-actions {
  display: grid !important;
  grid-template-columns: .8fr 1.35fr;
  gap: 12px;
  margin-top: 16px;
}

#product-modal .product-modal-actions .button {
  min-height: 58px;
  border-radius: 14px !important;
  font-weight: 800;
}

#product-modal #cancel-product-modification {
  border: 1px solid rgba(255,255,255,.34) !important;
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
}

#product-modal #confirm-product-modification {
  border: 1px solid #ffe9a0 !important;
  background: #fff0bd !important;
  color: #07345a !important;
}

@media (max-width: 720px) {
  .cb-product-gallery-action-row,
  #product-modal .product-modal-actions {
    grid-template-columns: 1fr;
  }

  #product-modal .pizza-options-grid {
    grid-template-columns: 1fr;
  }

  #product-modal .product-modal-card {
    padding: 22px 18px !important;
    border-radius: 22px !important;
  }
}