/* ============================================================
   CHECKOUT2 — restyle completo della pagina di checkout, sullo
   stesso linguaggio visivo della landing (landing-corso.css):
   stessi token (--orange, --ink, --grad, --radius, --shadow...
   già dichiarati globalmente in custom.css), card, step numerati,
   riepilogo ordine sticky in colonna laterale.

   Tutte le regole sono sotto lo scope .ck2 con classi prefissate
   ck2- per non entrare in conflitto con lo stile del vecchio
   checkout.aspx (che resta invariato, custom.css compreso).

   Va caricato DOPO custom.css.
   ============================================================ */

.ck2{ background:var(--paper);}
.ck2 *,.ck2 *::before,.ck2 *::after{ box-sizing:border-box;}

/* ---------- fascia introduttiva ---------- */
.ck2-hero{ background:var(--ink); padding:60px 0; text-align:center;}
.ck2-eyebrow{
  font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--orange); margin:0 0 10px;
}
.ck2-hero h1{
  font-family:var(--font); font-size:clamp(24px,3vw,34px); font-weight:200;
  line-height:1.3; color:#fff; margin:0; max-width:820px; margin:0 auto;
}
.ck2-grad{
  font-weight:700;
  background:-webkit-linear-gradient(45deg,#da7526,#e89a52);
  background:linear-gradient(45deg,#da7526,#e89a52);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.ck2 .container{ max-width:1180px; margin:0 auto; padding:0 24px;}

/* ---------- carrello vuoto ---------- */
.ck2-empty{ padding:80px 0; text-align:center;}
.ck2-empty-card{
  max-width:460px; margin:0 auto; padding:48px 36px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg);
}
.ck2-empty-icon{
  width:56px; height:56px; margin:0 auto 20px; border-radius:50%; background:var(--grad-soft);
  color:var(--orange); font-size:26px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.ck2-empty-card h2{ font-size:24px; font-weight:400; margin-bottom:10px;}
.ck2-empty-card p{ color:var(--tx-mid); margin-bottom:26px;}

/* ---------- griglia principale ----------
   CLAUDE: le colonne sono ora il normale .row/.col-* di Bootstrap
   (vedi checkout2.aspx: col-lg-8/col-md-7 per ck2-main, col-lg-4/
   col-md-5 per ck2-sidebar) — per cambiare le proporzioni basta
   modificare quelle classi, senza toccare questo file. Qui resta
   solo lo spazio verticale tra le card e il comportamento sticky
   della colonna di riepilogo. */
.ck2-grid{ padding:44px 0 90px;}
@media(max-width:960px){
  .ck2-grid{ padding:30px 0 60px;}
}

.ck2-main{ display:flex; flex-direction:column; gap:22px; margin-bottom:22px;}

.ck2-sidebar{ position:sticky; top:24px;}
@media(max-width:991px){
  .ck2-sidebar{ position:static;}
  
  .ck2-hero{ padding:20px 0;}
}

.ck2-divider{ border:0; border-top:1px solid var(--line); margin:24px 0;}

/* ---------- card generiche ---------- */
.ck2-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 28px; box-shadow:var(--shadow);
}
.ck2-card h2{ font-size:22px; font-weight:400; margin:0;}
.ck2-card h3{ font-size:18px; font-weight:600; color:var(--tx); margin:0 0 18px;}
.ck2-card h4{ font-size:15px; font-weight:600; color:var(--tx); margin:0 0 12px;}

/* step numerati (1. I tuoi dati / 2. Spedizione) */
.ck2-step{ display:flex; align-items:center; gap:14px; margin-bottom:22px;}
.ck2-step-n{
  width:30px; height:30px; flex:none; border-radius:50%; background:var(--grad);
  color:#fff; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.ck2-step h2{ margin:0;}

/* ---------- carrello / prodotti ---------- */
.ck2-cart{ padding:0; overflow:hidden;}
.ck2-cart .ck2-step{ padding:24px 28px 0;}
.ck2-cart .carrello-checkout{ padding:20px 6px 6px;}
.ck2-cart table.cart{ margin:0;}
.ck2-cart table.cart thead th{ background:var(--ink); color:#fff; font-weight:600; border:0; padding:14px 16px;}
.ck2-cart table.cart tbody td{ padding:14px 16px;}

.ck2-order-box{ padding:0;}
.ck2-order-box .ck2-step{ padding:24px 24px 0;}
.ck2-order-box .table-responsive{ overflow-x:visible; border:0;}
.ck2-order-box .carrello-checkout{ padding:14px 24px 4px;}
.ck2-order-box .ck2-divider{ margin:20px 24px;}
.ck2-order-box .ck2-order-totals{ padding:0 24px;}
.ck2-order-box .ck2-payment{ padding:0 24px 26px;}

.ck2-order-box table.cart{ margin:0; width:100%; table-layout:fixed;}
.ck2-order-box table.cart th, .ck2-order-box table.cart td{ vertical-align:middle;}

.ck2-order-box table.cart .product-thumbnail{ width:44px; padding:10px 8px;}
.ck2-order-box table.cart .product-thumbnail img{ width:100%; height:auto; object-fit:cover; border-radius:6px; display:block;}

.ck2-order-box table.cart .product-name{ width:auto; white-space:normal; word-break:break-word; font-size:13.5px; line-height:1.35; padding:12px 8px;}

.ck2-order-box table.cart .product-price{ width:64px; font-size:12px; white-space:nowrap; text-align:right; padding:12px 8px;}
.ck2-order-box table.cart .product-quantity{ width:30px; font-size:12px; text-align:center; padding:12px 8px;}
.ck2-order-box table.cart .product-subtotal{ width:70px; font-size:12px; font-weight:600; text-align:right; padding:12px 8px;}

.ck2-order-box table.cart thead th{ background:var(--ink); color:#fff; font-weight:600; font-size:12px; border:0; padding:10px 8px;}
.ck2-order-box table.cart thead th.product-price, .ck2-order-box table.cart thead th.product-quantity, .ck2-order-box table.cart thead th.product-subtotal{ text-align:right; font-size:11px;}
.ck2-order-box table.cart thead th.product-quantity{ text-align:center;}

.ck2-card.upsell-products{ padding:20px;}


table.ck2-totals-table tr td {	text-align: right;}


/* ---------- form / checkbox fattura ---------- */
.ck2 .dati-fatturazione{
  margin-top:24px; padding-top:24px; border-top:1px dashed var(--line);
}
.ck2 .chk-fattura{ margin:20px 0 2px;}
.ck2 .chk-fattura label{ width:auto; display:inline-block; padding-left:30px; font-weight:600; color:var(--tx); cursor:pointer;}
.ck2 .chk-fattura label span{ padding-left:0; color:var(--tx); font-size:15px;}
.ck2 .chk-fattura label:before{ border-radius:5px; border-color:var(--orange);}
.ck2 .chk-fattura input[type=checkbox]:checked + label:before{ background:var(--orange); border-color:var(--orange); color:#fff;}

/* wrapper telefono con prefisso internazionale */
.ck2 .iti-wrap{ width:100%;}
.ck2 .iti-wrap .iti{ width:100%;}
.ck2 .iti-wrap input.telefono-intl{ width:100%; padding-left:52px !important;}

/* ---------- dropdown Chosen: coerenza col resto dei campi anche prima dell'init JS ---------- */
.ck2 select{ border-radius:8px;}
.ck2 .chosen-container{ width:100% !important;}

/* ---------- riepilogo totali (dentro il box unico) ---------- */
.ck2-totals-table{ margin-bottom:0;}
.ck2-order-box .ck2-totals-table > tbody > tr > th,
.ck2-order-box .ck2-totals-table > tbody > tr > td{ border-top:0;}
.ck2-totals-table th, .ck2-totals-table td{ padding:8px 8px; font-size:15px; color:var(--tx-mid); border:0;}
.ck2-order-box .ck2-totals-table > tbody > tr.order-total > th,
.ck2-order-box .ck2-totals-table > tbody > tr.order-total > td{
  font-size:20px; font-weight:700; color:var(--tx); padding-top:16px; border-top:1px solid var(--line);
}
.ck2-totals-table .order-total .amount{
  background:-webkit-linear-gradient(45deg,#93261d,#da7526);
  background:linear-gradient(45deg,#93261d,#da7526);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.ck2-totals-table .dicitura{ font-size:12px; font-weight:400; color:var(--tx-dim);}

/* ---------- metodo di pagamento (dentro il box unico) ---------- */
.ck2-payment h3{ margin-bottom:16px;}
.ck2-payment .listacheck{ display:flex; flex-direction:column; gap:10px;}
.ck2-payment .listacheck br{ display:none;}
.ck2-payment .listacheck input[type=radio]{ position:absolute; opacity:0;}
.ck2-payment .listacheck label{
  position:relative; display:flex; align-items:center; width:100%;
  margin:0; padding:14px 18px 14px 46px; background:var(--soft); border:2px solid var(--line);
  border-radius:12px; font-weight:600; font-size:15px; color:var(--tx-mid); cursor:pointer;
}
.ck2-payment .listacheck label:before{
  content:""; position:absolute; left:16px; top:50%; margin-top:-9px;
  width:18px; height:18px; border-radius:50%; border:2px solid var(--line); background:var(--paper);
}
.ck2-payment .listacheck label:after{
  content:""; position:absolute; left:21px; top:50%; margin-top:-4px;
  width:8px; height:8px; border-radius:50%; background:var(--orange);
  opacity:0;
}
.ck2-payment .listacheck input[type=radio]:checked + label{ border-color:var(--orange); background:var(--grad-soft); color:var(--tx);}
.ck2-payment .listacheck input[type=radio]:checked + label:before{ border-color:var(--orange);}
.ck2-payment .listacheck input[type=radio]:checked + label:after{ opacity:1; transform:scale(1);}

.ck2-cta{ width:100%; margin-top:22px; text-align:center;}
.ck2-secure-note{ margin:14px 0 0; font-size:13px; text-align:center; color:var(--tx-dim);}
.ck2-sospeso{ margin-top:16px; padding:14px 16px; background:var(--grad-soft); border-radius:10px; font-size:14px; color:var(--tx);}

.prodottoupsell .product-add label{ width:auto; display:inline-block; position:relative; padding-left:30px; padding-top:2px; font-weight:600; color:var(--tx); cursor:pointer;}
.prodottoupsell .product-add label span{ padding-left:0; color:var(--tx); font-size:15px;}
.prodottoupsell .product-add label:before{ width:20px; height:20px; left:0px; top:0px; background:var(--soft); border:1px solid var(--line); content:""; position:absolute; margin-right:10px; cursor:pointer; border-radius:5px; border-color:var(--orange);}
.prodottoupsell .product-add input[type=checkbox]{ display:none;}
.prodottoupsell .product-add input[type=checkbox]:checked + label:before{ background:var(--orange); border-color:var(--orange); color:#fff; font-family:FontAwesome; content:"\f0c8"; text-align: center; line-height:18px; font-size:6px; color:#fff;}

.iti__country-name{ font-size:17px; line-height:1;}
.iti__dial-code{ font-size:17px; line-height:1;}
.iti__dropdown-content{ padding:5px;}
.iti__dropdown-content input{ height:35px; line-height:35px; font-size:14px; border-radius:5px; margin-bottom:10px;}

@media(max-width:1200px){

	.cart .product-thumbnail{ width:40px !important;}
	.cart .product-thumbnail img{ max-width:40px;}

}

@media(max-width:768px){
	
	.cart tbody tr.cart_item td{ width:100% !important;}
	.cart tbody tr.cart_item td.product-thumbnail{ text-align:center;}
	.ck2-order-box table.cart .product-thumbnail img{ display:inline-block;}
	.cart tbody tr.cart_item td.product-price,
	.cart tbody tr.cart_item td.product-quantity,
	.cart tbody tr.cart_item td.product-subtotal{ width:33.33% !important;}
	.ck2-order-box table.cart .product-name:before{ display:none !important;}
	.cart tbody tr.cart_item td.product-price{ line-height:1; white-space:normal;}
	.cart tbody tr.cart_item td.product-subtotal{ line-height:1; white-space:normal;}
	
	.ck2-main{ gap:0px;}
	
}


@media(max-width:520px){
  .ck2-card{ padding:22px 18px;}
  .ck2-order-box{ padding:0;}
  .ck2-order-box .ck2-step, .ck2-order-box .carrello-checkout, .ck2-order-box .ck2-divider, .ck2-order-box .ck2-order-totals, .ck2-order-box .ck2-payment{
    padding-left:18px; padding-right:18px;
  }
}