/* 2026-formulari-shop-v2.css  (scoped, mínim, sense línies “fantasma”) */

/* ----- Scope general ----- */
#formulari-shop{max-width:1046px;margin:0 auto;padding:0 12px;box-sizing:border-box;}
#formulari-shop .form-shop{margin:0;}
#carroContenidor{padding:0 0 20px;}

/* Reset només dins del formulari (NO global) */
#formulari-shop table{border-collapse:separate;border-spacing:0;}
#formulari-shop td,#formulari-shop th{border:0;}
#formulari-shop tr{border:0;}
#formulari-shop hr{border:0;height:0;margin:0;}

/* ==========================================================
   1) FORMULARI (taula_facturacio) “des-taulitzat”
   ========================================================== */
#taula_facturacio{width:min(900px,100%) !important;margin:0 auto;table-layout:fixed;}
#taula_facturacio tr{display:flex;gap:14px;align-items:center;padding:10px 0;}
#taula_facturacio td{display:block;height:auto !important;padding:0 !important;}
#taula_facturacio td.normal{flex:0 0 180px;font-size:13px;letter-spacing:.2px;color:#333;text-align:left;}
#taula_facturacio td[id^="error"]{flex:1 1 auto;border-radius:10px;padding:3px !important;}
#taula_facturacio input[type="text"],#taula_facturacio select,#taula_facturacio textarea{width:100%;max-width:100%;box-sizing:border-box;}
#taula_facturacio textarea#NOTES{min-height:120px;resize:vertical;font-size:12px;}

/* Camps (aprofita classe existent) */
#formulari-shop .camp-formulari{padding:9px 10px;border:1px solid rgba(0,0,0,.18);border-radius:10px;background:#fff;color:#222;font-size:14px;line-height:1.2;}

/* Checkboxes: no cal tocar gaire */
#taula_facturacio input[type="checkbox"]{vertical-align:middle;}

/* Responsive formulari */
@media (max-width:900px){#taula_facturacio tr{flex-wrap:wrap;align-items:flex-start;}#taula_facturacio td.normal{flex:1 1 100%;}#taula_facturacio td[id^="error"]{flex:1 1 100%;}}

/* ==========================================================
   2) CARRO (#divCarroPetit33) — sense línies per totes les taules
   ========================================================== */
#divCarroPetit33{width:min(900px,100%);margin:18px auto 0;padding:16px;border:1px solid #e3e3e3;border-radius:14px;background:#f6fbff;box-shadow:0 6px 16px rgba(0,0,0,.06);box-sizing:border-box;text-align:left;}

/* IMPORTANT: NO posis separadors a "tots els tr" del carro */
#divCarroPetit33 table{width:100%;}
#divCarroPetit33 td{vertical-align:top;}
#divCarroPetit33 img{border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.10);display:block;}

/* Amaga els <hr> del carro (els que tens dins la tercera fila de cada producte) */
#divCarroPetit33 hr{display:none !important;}

/* ---- Separador net NOMÉS per la taula de productes (width='98%') ----
   Cada producte té 3 <tr>: (1) imatge+qtt (2) nom+delete (3) hr
   Posem línia després del tr (2): nth-child(3n+2) */
#divCarroPetit33 table[width="98%"] tr{position:static;}
#divCarroPetit33 table[width="98%"] tr:nth-child(3n+2) td{padding-bottom:10px;}
#divCarroPetit33 table[width="98%"] tr:nth-child(3n+2){border-bottom:1px solid rgba(0,0,0,.12);}
#divCarroPetit33 table[width="98%"] tr:nth-child(3n+3){display:none;} /* fila de l'hr */

/* Petita separació vertical entre files del mateix producte */
#divCarroPetit33 table[width="98%"] tr:nth-child(3n+1) td{padding-top:8px;padding-bottom:6px;}

/* Taula interna del QTT (width=150): la neutralitzem perquè no “desquadri” */
#divCarroPetit33 table[width="150"]{width:auto;border-collapse:separate;border-spacing:0;}
#divCarroPetit33 table[width="150"] td{padding:0;}

/* QTT */
#divCarroPetit33 input[id^="QTT"]{width:44px;text-align:right;padding:6px 8px;border:1px solid rgba(0,0,0,.18);border-radius:10px;background:#fff;box-sizing:border-box;}

/* Botons +/- */
#divCarroPetit33 .botons-carro-inline{display:inline-flex;gap:8px;align-items:center;justify-content:center;}
#divCarroPetit33 .botonet-carro{width:30px;height:30px;border-radius:10px;border:1px solid rgba(0,0,0,.18);background:#fff;cursor:pointer;font-weight:800;line-height:1;}
#divCarroPetit33 .botonet-carro:hover{background:#d60000;border-color:#d60000;color:#fff;}

/* Botó treure */
.boto-treure-carro{width:28px;height:28px;border-radius:9999px;border:1px solid #d60000;background:#fff;color:#d60000;cursor:pointer;font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .05s ease;}
.boto-treure-carro:hover{background:#d60000;color:#fff;border-color:#d60000;}
.boto-treure-carro:active{background:#d60000;color:#fff;transform:translateY(1px);}

/* Afegir producte */
#divCarroPetit33 input.resaltat{margin-top:8px;padding:9px 10px;border:1px solid rgba(0,0,0,.18);border-radius:10px;width:min(260px,100%);box-sizing:border-box;}

/* Botó gran */
#formulari-shop .boto-comprar{display:block;margin:18px auto 0;padding:18px 26px;border:0;border-radius:10px;background:#7aa845;color:#fff;cursor:pointer;box-shadow:0 10px 20px rgba(0,0,0,.12);}
#formulari-shop .boto-comprar:hover{filter:brightness(.95);}

@media (max-width:520px){#divCarroPetit33{padding:12px;}#formulari-shop .boto-comprar{width:100%;}}

/* Formulari sense taula */
#taula_facturacio.form-grid{width:min(900px,100%);margin:0 auto;display:grid;gap:12px;}
#taula_facturacio .form-row{display:grid;grid-template-columns:180px 1fr;gap:14px;align-items:center;}
#taula_facturacio .form-row--full{grid-template-columns:180px 1fr;align-items:start;}
#taula_facturacio .form-label{font-size:13px;letter-spacing:.2px;color:#333;text-align:left;}
#taula_facturacio .form-field{min-width:0;}
#taula_facturacio textarea{padding:9px 10px;border:1px solid rgba(0,0,0,.18);border-radius:10px;background:#fff;color:#222;font-size:14px;line-height:1.2;}
#taula_facturacio select,#taula_facturacio .form-check{margin-top:12px;display:flex;gap:10px;align-items:flex-start;}
#taula_facturacio .form-check input{margin-top:2px;}

@media (max-width:900px){#taula_facturacio .form-row,#taula_facturacio .form-row--full{grid-template-columns:1fr;}#taula_facturacio .form-label{margin-bottom:4px;}}

.carro-wrap{width:min(900px,100%);margin:0 auto;text-align:center;}
.carro-box{margin:18px auto 0;padding:16px;border:1px solid #e3e3e3;border-radius:14px;background:#f6fbff;box-shadow:0 6px 16px rgba(0,0,0,.06);box-sizing:border-box;text-align:left;}
.carro-items{display:flex;flex-direction:column;gap:12px;}
.carro-item{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.12);}
.carro-item:last-child{border-bottom:0;padding-bottom:0;}
.carro-img{flex:0 0 75px;}
.carro-img img{display:block;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.10);width:75px;height:auto;}
.carro-main{flex:1 1 auto;min-width:0;}
.carro-title{font-size:14px;line-height:1.25;color:#222;margin-bottom:8px;overflow-wrap:anywhere;min-width:0;}
.carro-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.carro-qtt{width:44px;text-align:right;padding:6px 8px;border:1px solid rgba(0,0,0,.18);border-radius:10px;background:#fff;box-sizing:border-box;}
.carro-add{margin-top:16px;padding-top:12px;border-top:1px solid rgba(0,0,0,.12);}
.carro-add-title{display:inline-block;font-size:16px;font-weight:bold;color:#d60000;cursor:pointer;}
.carro-add-inputs{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.carro-add-inputs .resaltat{padding:9px 10px;border:1px solid rgba(0,0,0,.18);border-radius:10px;box-sizing:border-box;width:min(260px,100%);}

@media (max-width:520px){.carro-box{padding:12px;}.carro-item{gap:10px;}}

/* ==========================================================
   SECCIONS FORMULARI DE COMPRA
   ========================================================== */
.titol-seccio-formulari{position:relative;padding-left:55px;/* espai pel número */font-size:20px;font-weight:bold;color:#d60000;text-align:left;line-height:1.3;margin-bottom:20px;}
.titol-seccio-formulari .num-seccio{position:absolute;left:0;top:0;width:40px;height:40px;line-height:40px;font-size:36px;font-weight:bold;color:#fff;background-color:#d60000;text-align:center;border-radius:4px;}
.titol-seccio-formulari .subtitol{display:block;margin-top:3px;font-size:14px;color:#666;font-weight:normal;}

/* ===== Ajustos d'espai (proporció visual) ===== */
#formulari-shop{margin-top:28px;}
.carro-wrap{margin-top:28px;}
#formulari-shop .boto-comprar{margin-top:30px;}
#carroContenidor{padding-bottom:45px;}

/* Força tipografia i mida quan XAJAX reescriu els selects */
#divProvincia select,#divPais select{font-family:var(--font-a,Arial,Helvetica,sans-serif) !important;font-size:14px !important;line-height:1.2 !important;}

/* Si algun cop entra un select sense classe, assegura padding i bordes coherents */
#divProvincia select,#divPais select{padding:9px 10px !important;border:1px solid rgba(0,0,0,.18) !important;border-radius:10px !important;background:#fff !important;color:#222 !important;box-sizing:border-box !important;width:100% !important;max-width:100% !important;}


/* ==========================================================
   Layout responsive per #taula_formulari (ara és un div)
   ========================================================== */
#taula_formulari.checkout-cols{width:min(1200px,95%);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;}
#taula_formulari.checkout-cols .checkout-col{min-width:0;}
#taula_formulari.checkout-cols .checkout-col--entrega{padding-top:10px;} /* substitueix el <br> antic */

/* Taules internes: que ocupin el 100% del seu contenidor */
#taula_formulari.checkout-cols #taula_facturacio,
#taula_formulari.checkout-cols #taula_entrega{width:100% !important;max-width:none !important;margin:0 !important;}

/* Responsive: apilar */
@media (max-width:980px){#taula_formulari.checkout-cols{grid-template-columns:1fr;gap:18px;}#taula_formulari.checkout-cols .checkout-col--entrega{padding-top:0;}}

/* ==========================================================
   PATCH v38 — igualar columnes Facturació / Entrega (mínim canvi)
   Funciona amb: <table id="taula_formulari"> ... <td width="50%"> ...</td>
   ========================================================== */

/* 1) Contenidor 2 columnes: aprofita amplada i fixa layout */
#taula_formulari{width:min(1200px,95%) !important;margin:0 auto;table-layout:fixed;}
#taula_formulari>tbody>tr>td{vertical-align:top;}

/* Treu el <br> que tens al td dret (evita desplaçaments “tontos”) */
#taula_formulari>tbody>tr>td[valign="top"]>br:first-child{display:none;}

/* 2) IMPORTANT: que les taules internes NO vagin al 80% */
#taula_formulari #taula_facturacio,
#taula_formulari #taula_entrega{width:100% !important;max-width:none !important;margin:0 !important;}

/* 3) Unifica espais/aire entre files a les dues taules */
#taula_formulari #taula_facturacio td,
#taula_formulari #taula_entrega td{padding:8px 10px;} /* complementa el cellspacing sense dependre’n */

/* 4) Unifica columna d’etiquetes (esquerra) */
#taula_formulari #taula_facturacio td.normal:first-child,
#taula_formulari #taula_entrega td.normal:first-child{
  width:180px !important;              /* mateix ample a les dues */
  white-space:nowrap;
  font-size:13px;
  letter-spacing:.2px;
  color:#333;
}

/* 5) Camps: que omplin l’espai disponible */
#taula_formulari #taula_facturacio input[type="text"],
#taula_formulari #taula_entrega input[type="text"],
#taula_formulari #taula_facturacio select,
#taula_formulari #taula_entrega select,
#taula_formulari #taula_facturacio textarea,
#taula_formulari #taula_entrega textarea{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

/* 6) Responsive: apila les 2 columnes (sense tocar HTML) */
@media (max-width:980px){
  #taula_formulari,
  #taula_formulari>tbody,
  #taula_formulari>tbody>tr,
  #taula_formulari>tbody>tr>td{
    display:block;
    width:100% !important;
  }

  /* una mica d’aire entre seccions quan s’apila */
  #taula_formulari>tbody>tr>td + td{margin-top:18px;}
}

/* 7) Responsive extra: en pantalles molt estretes, etiqueta a sobre del camp */
@media (max-width:560px){
  #taula_formulari #taula_facturacio tr,
  #taula_formulari #taula_entrega tr{display:block;}

  #taula_formulari #taula_facturacio td.normal:first-child,
  #taula_formulari #taula_entrega td.normal:first-child{
    width:auto !important;
    display:block;
    margin-bottom:4px;
    white-space:normal;
  }

  #taula_formulari #taula_facturacio td.normal:first-child + td,
  #taula_formulari #taula_entrega td.normal:first-child + td{
    display:block;
    padding-top:0;
  }
}


/* ==========================================================
   PATCH v39 — FORMA DE PAGO: opcions mes grans i clares
   A INSTOP els <label> de pagament NO tenen classe propia; els
   identifiquem per id="LAB..." (contenen el radio .pago). Nomes visual.
   ========================================================== */

#formulari-shop label[id^="LAB"]{
  display:flex;
  align-items:center;
  gap:14px;
  margin:8px 0;
  max-width:520px;
  padding:14px 18px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  font-size:17px;
  line-height:1.2;
  color:#222;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
#formulari-shop label[id^="LAB"]:hover{
  border-color:#d60000;
  background:#fff7f7;
}

/* Radio mes gran i amb color de marca */
#formulari-shop label[id^="LAB"] input.pago{
  width:22px;
  height:22px;
  flex:0 0 auto;
  margin:0;
  accent-color:#d60000;
  cursor:pointer;
}
#formulari-shop label[id^="LAB"] span{flex:1 1 auto;}

/* Opcio seleccionada ben destacada */
#formulari-shop label[id^="LAB"]:has(input.pago:checked){
  border-color:#d60000;
  background:#fff1f1;
  box-shadow:0 2px 10px rgba(214,0,0,.12);
  font-weight:bold;
}


/* ==========================================================
   PATCH v40 — Carro checkout dins #divCarroPetit (position:fixed)
   Un element fixe sense amplada s'expandeix a l'amplada preferida
   del contingut; limitem el wrap perque els titols llargs trenquin
   linia en lloc d'estirar el panell. Nomes afecta el checkout
   (el mini-carro del bdreta no te .carro-wrap).
   ========================================================== */
#divCarroPetit .carro-wrap{width:min(430px,calc(100vw - 30px));}
#divCarroPetit .carro-box{max-width:100%;box-sizing:border-box;}


/* ==========================================================
   PATCH v41 - Ergonomia checkout (nomes CSS, HTML intacte)
   Objectiu: ritme vertical identic a les dues columnes,
   camps amb alcada uniforme, capcaleres alineades i numerades,
   i blocs secundaris (checkbox, YA ESTOY REGISTRADO) integrats.
   ========================================================== */

/* 1) Neutralitza cellspacing/height dels atributs HTML:
      el ritme el marca nomes el padding, igual a les dues taules */
#taula_formulari #taula_facturacio,
#taula_formulari #taula_entrega{border-collapse:separate !important;border-spacing:0 !important;}
#taula_formulari #taula_facturacio td,
#taula_formulari #taula_entrega td{height:auto !important;padding:9px 10px;vertical-align:middle;}

/* 2) Camps amb aspecte i alcada identics (inputs, password i selects,
      incloent els que xajax reescriu a divPaisEntrega/divProvinciaEntrega) */
#taula_formulari input[type="text"],
#taula_formulari input[type="password"],
#taula_formulari select{padding:9px 10px;border:1px solid rgba(0,0,0,.18);border-radius:10px;background:#fff;color:#222;font-family:var(--font-a,Arial,Helvetica,sans-serif);font-size:14px;line-height:1.2;box-sizing:border-box;}

/* 3) Capcaleres de columna a la mateixa alcada de sortida */
#taula_formulari > tbody > tr > td > br{display:none;}
#taula_formulari h2.titol-seccio-formulari{margin:0 0 18px;min-height:64px;}

/* Numero "2" a DIRECCION DE ENTREGA (replica el .num-seccio sense tocar HTML;
   el h2 de la dreta es distingeix per la classe .tooltip) */
#taula_formulari h2.titol-seccio-formulari.tooltip::before{content:"2";position:absolute;left:0;top:0;width:40px;height:40px;line-height:40px;font-size:36px;font-weight:bold;color:#fff;background:#d60000;text-align:center;border-radius:4px;}

/* 4) Espai entre columnes controlat (anul-la el cellpadding=10 de la taula pare) */
@media (min-width:981px){
  #taula_formulari > tbody > tr > td{padding:0 !important;}
  #taula_formulari > tbody > tr > td + td{padding-left:34px !important;}
}

/* 5) Fila del checkbox MARCAR SI... com a bloc destacat i clicable */
#taula_entrega tr:first-child td{padding:11px 14px !important;background:#f7f7f7;border:1px solid #e3e3e3;border-radius:10px;font-weight:700;cursor:pointer;}
#taula_entrega input[type="checkbox"]{width:18px;height:18px;accent-color:#d60000;vertical-align:-4px;margin-right:8px;cursor:pointer;}

/* 6) Caixa YA ESTOY REGISTRADO coherent amb la resta
      (la taula porta border inline #CCC: cal !important) */
#taula_formulari div[align="center"] > p{display:none;} /* el <p>&nbsp;</p> separador */
#taula_formulari div[align="center"] > table{border:1px solid #e3e3e3 !important;border-radius:12px;background:#fafafa;margin-top:26px;padding:10px 14px 14px;}
#taula_formulari div[align="center"] .titol-seccio-formulari{padding-left:0;text-align:center;font-size:17px;margin-bottom:6px;}
#taula_formulari div[align="center"] td{padding:6px 8px;}
#taula_formulari div[align="center"] .detall a{font-size:11px;color:#666;text-decoration:underline;}

/* Boto OK del login */
#taula_formulari input[type="button"]{padding:9px 26px;border:1px solid rgba(0,0,0,.18);border-radius:10px;background:#fff;font-weight:700;font-size:14px;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;}
#taula_formulari input[type="button"]:hover{background:#d60000;border-color:#d60000;color:#fff;}