/* =========================================================
   CENOTEKA – FINAL CUSTOM CSS (from revision 46698)
   Cleaned (removed duplicates, kept both selector modes)
   ========================================================= */


/* =========================
   DELIVERY PROVIDERS (radio)
   ========================= */

/* Rules for delivery-provider radios in checkout:
   - Make each label full-width block, with spacing.
   - Improves readability + click area. */
.woocommerce-checkout .cenoteka-dp-field .woocommerce-input-wrapper label{
  display:block;          /* each option on its own line */
  margin:10px 0;          /* vertical spacing between options */
  line-height:1.2;        /* tighter line height */
}

/* Only the "main text line" stays inline next to the radio input */
.woocommerce-checkout .cen-dp-main{
  display:inline;         /* stays on same line */
  vertical-align:middle;  /* aligns baseline with radio */
}


/* ==========================================
   RETAILER SELECT (checkout) – boxed cards
   ========================================== */

/* Grid container for retailer options:
   - 2 columns by default (you set repeat(2,...))
   - gap between cards
   - stretch cards to same height */
#cenoteka_retailer_select_field .woocommerce-input-wrapper{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  align-items:stretch;
}

/* Hides native radio circles (still accessible for screen readers):
   - This is why you currently DON'T see the radio “button”. */
#cenoteka_retailer_select_field .woocommerce-input-wrapper input[type="radio"]{
  position:absolute !important;
  left:-9999px !important;
  opacity:0 !important;
  width:1px !important;
  height:1px !important;
}

/* Makes label clickable and removes default margins/padding
   so the inner "card" controls the spacing. */
#cenoteka_retailer_select_field .woocommerce-input-wrapper label.radio,
#cenoteka_retailer_select_field .woocommerce-input-wrapper label.cen-ret-radio{
  margin:0 !important;
  padding:0 !important;
  cursor:pointer;         /* pointer cursor on hover */
  display:block;          /* full clickable block */
}

/* The “card” UI wrapper inside label:
   - inline-flex for centering
   - padding + border + rounded corners
   - animation on hover/selected */
#cenoteka_retailer_select_field .cen-ret-option{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  background:#f6f7f8;
  border:1px solid #e2e4e7;
  border-radius:10px;
  text-decoration:none !important;
  color:#111;
  width:100%;
  min-height:44px;
  justify-content:center;
  transition:transform .06s ease, border-color .12s ease, background .12s ease;
  box-sizing:border-box;
}

/* Fallback style if .cen-ret-option is missing (older markup):
   - Style the label itself as a card/button. */
#cenoteka_retailer_select_field .woocommerce-input-wrapper label.radio:not(:has(.cen-ret-option)){
  padding:10px 10px !important;
  background:#f7f7f7;
  border:1px solid #e6e6e6;
  border-radius:10px;
  text-align:center;
  font-weight:600;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1.15;
  transition:transform .06s ease, border-color .12s ease, background .12s ease;
  box-sizing:border-box;
}

/* Hover effects:
   - Darken background + border on hover for better feedback. */
#cenoteka_retailer_select_field .woocommerce-input-wrapper label.radio:hover .cen-ret-option,
#cenoteka_retailer_select_field .woocommerce-input-wrapper label.cen-ret-radio:hover .cen-ret-option{
  background:#f0f1f2;
  border-color:#d6d9dd;
}
#cenoteka_retailer_select_field .woocommerce-input-wrapper label.radio:not(:has(.cen-ret-option)):hover{
  background:#f0f0f0;
  border-color:#d6d6d6;
}

/* Retailer logo styling (image) */
#cenoteka_retailer_select_field .cen-ret-logo{
  width:58px;
  height:auto;
  border-radius:6px;
  background:#fff;
  padding:2px;
}

/* Retailer name styling */
#cenoteka_retailer_select_field .cen-ret-name{
  font-size:14px;
  font-weight:700;
  line-height:1;
}

/* Selected state:
   We support 2 possible HTML structures:
   A) input is INSIDE label => label:has(input:checked)
   B) input is BEFORE label => input:checked + label
*/
#cenoteka_retailer_select_field label.radio:has(input[type="radio"]:checked) .cen-ret-option,
#cenoteka_retailer_select_field label.cen-ret-radio:has(input[type="radio"]:checked) .cen-ret-option{
  background:#111;
  color:#fff;
  border-color:#111;
  transform:translateY(-1px);
}
#cenoteka_retailer_select_field .woocommerce-input-wrapper input[type="radio"]:checked + label.radio{
  background:#111;
  color:#fff;
  border-color:#111;
  transform:translateY(-1px);
}

/* Keep logo “box” white even when selected (optional visual) */
#cenoteka_retailer_select_field label.radio:has(input[type="radio"]:checked) .cen-ret-logo,
#cenoteka_retailer_select_field label.cen-ret-radio:has(input[type="radio"]:checked) .cen-ret-logo{
  background:#fff;
}

/* Removes required asterisk that repeats inside each option */
#cenoteka_retailer_select_field .woocommerce-input-wrapper label .required,
#cenoteka_retailer_select_field .woocommerce-input-wrapper label .required_field span.required{
  display:none !important;
}

/* Emphasize “Cheapest” option if using classic input+label structure */
#cenoteka_retailer_select_field .woocommerce-input-wrapper input[value="cheapest"] + label.radio{
  font-weight:800;
}

/* Responsive grid:
   - under 900px: still 2 columns
   - under 480px: 1 column and left align content */
@media (max-width:900px){
  #cenoteka_retailer_select_field .woocommerce-input-wrapper{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:480px){
  #cenoteka_retailer_select_field .woocommerce-input-wrapper{
    grid-template-columns:1fr;
  }
  #cenoteka_retailer_select_field .cen-ret-option{
    justify-content:flex-start;
  }
  #cenoteka_retailer_select_field .woocommerce-input-wrapper label.radio:not(:has(.cen-ret-option)){
    justify-content:flex-start;
    text-align:left;
  }
}


/* ==========================================
   SELECTED RETAILER BOX (checkout/product)
   ========================================== */

/* Wrapper spacing above the selected retailer box */
.cenoteka-selected-retailer-checkout{
  margin-top:8px;
}

/* Makes selected retailer look like a compact card */
.cenoteka-selected-retailer-checkout a{
  display:flex !important;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  background:#f6f7f8;
  border:1px solid #e2e4e7;
  border-radius:10px;
  text-decoration:none !important;
  color:#111;
  max-width:fit-content;
  box-sizing:border-box;
}

/* Hover feedback */
.cenoteka-selected-retailer-checkout a:hover{
  background:#f0f1f2;
  border-color:#d6d9dd;
}

/* Logo sizing inside selected retailer box */
.cenoteka-selected-retailer-checkout img{
  width:40px;
  height:auto;
  border-radius:6px;
  background:#fff;
  padding:2px;
}

/* Retailer name typography */
.cenoteka-selected-retailer-checkout strong{
  font-size:14px;
  font-weight:700;
  line-height:1;
}

/* Unit price aligned right */
.cenoteka-selected-retailer-checkout .cenoteka-unit-price{
  margin-left:auto;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  color:#111;
}

/* Slightly mute price opacity */
.cenoteka-selected-retailer-checkout .woocommerce-Price-amount{
  opacity:0.9;
}

/* Mobile tuning: full width row */
@media (max-width:480px){
  .cenoteka-selected-retailer-checkout a{
    width:100%;
    justify-content:space-between;
  }
  .cenoteka-selected-retailer-checkout strong{ font-size:13px; }
  .cenoteka-selected-retailer-checkout img{ width:36px; }
}


/* ==========================================
   CHECKOUT product title layout
   ========================================== */

/* Container that holds: image + name + quantity */
.woocommerce-checkout .checkout-product-container{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Fixed-size image holder (prevents layout jumping) */
.woocommerce-checkout .checkout-product-image{
  flex:0 0 52px;
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Ensure image fits the box */
.woocommerce-checkout .checkout-product-image img{
  max-width:52px;
  height:auto;
}

/* IMPORTANT: min-width:0 allows name to wrap instead of pushing qty out */
.woocommerce-checkout .checkout-product-details{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1;
  min-width:0;
}

/* Product name wraps nicely */
.woocommerce-checkout .checkout-product-name{
  flex:1;
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.2;
}

/* Quantity stays on the right and never wraps */
.woocommerce-checkout .checkout-product-quantity{
  flex:0 0 auto;
  white-space:nowrap;
  color:#555;
}


/* =========================================================
   ORDER / THANKYOU / VIEW-ORDER layout
   ========================================================= */

/* Force same inline layout across order pages */
.woocommerce-order .order-product-container,
.woocommerce-view-order .order-product-container,
.woocommerce-account .order-product-container{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  width:100%;
  box-sizing:border-box;
}

/* Image box fixed size */
.woocommerce-order .order-product-image,
.woocommerce-view-order .order-product-image,
.woocommerce-account .order-product-image{
  width:52px !important;
  height:52px !important;
  flex:0 0 52px !important;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Image itself */
.woocommerce-order .order-product-image img,
.woocommerce-view-order .order-product-image img,
.woocommerce-account .order-product-image img{
  max-width:52px;
  max-height:52px;
  width:auto;
  height:auto;
  border-radius:8px;
  display:block;
}

/* Force row layout (fixes theme inline column layouts) */
.woocommerce-order .order-product-details,
.woocommerce-view-order .order-product-details,
.woocommerce-account .order-product-details{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:6px !important;
  min-width:0 !important;
  flex:1 1 auto !important;
}

/* Name wraps; takes remaining space */
.woocommerce-order .order-product-name,
.woocommerce-view-order .order-product-name,
.woocommerce-account .order-product-name{
  flex:1 1 auto !important;
  min-width:0 !important;
  white-space:normal !important;
  word-break:break-word !important;
  line-height:1.2;
}

/* Qty stays to the right */
.woocommerce-order .order-product-qty,
.woocommerce-view-order .order-product-qty,
.woocommerce-account .order-product-qty{
  flex:0 0 auto !important;
  white-space:nowrap !important;
  font-weight:600 !important;
  color:#555 !important;
}

/* Classic WooCommerce qty next to name (e.g. ×2) */
.woocommerce-order td.product-name .product-quantity,
.woocommerce-view-order td.product-name .product-quantity,
.woocommerce-account td.product-name .product-quantity{
  margin-left:6px;
  white-space:nowrap;
}

/* Retailer box displayed under item on order pages */
.woocommerce-order .cenoteka-order-item-retailer a,
.woocommerce-view-order .cenoteka-order-item-retailer a,
.woocommerce-account .cenoteka-order-item-retailer a{
  display:flex !important;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  background:#f6f7f8;
  border:1px solid #e2e4e7;
  border-radius:10px;
  text-decoration:none !important;
  color:#111;
  width:fit-content;
  max-width:100%;
  box-sizing:border-box;
}

/* Retailer logo inside that box */
.woocommerce-order .cenoteka-order-item-retailer img,
.woocommerce-view-order .cenoteka-order-item-retailer img,
.woocommerce-account .cenoteka-order-item-retailer img{
  max-height:45px;
  width:auto;
  border-radius:6px;
  background:#fff;
  padding:2px;
  display:block;
}

/* Mobile: make box full width */
@media (max-width:480px){
  .woocommerce-order .cenoteka-order-item-retailer a,
  .woocommerce-view-order .cenoteka-order-item-retailer a,
  .woocommerce-account .cenoteka-order-item-retailer a{
    width:100%;
    justify-content:flex-start;
  }
}


/* =========================================================
   ORDER DETAILS TABLE – mobile widths 72/28
   ========================================================= */
@media (max-width:768px){

  /* Remove theme forced widths and max-widths */
  .woocommerce-table--order-details :is(th, td){
    max-width:none !important;
    width:auto !important;
  }

  /* Fixed table layout makes widths respected */
  .woocommerce-table--order-details{
    table-layout:fixed;
    width:100%;
  }

  /* Product column wide */
  .woocommerce-table--order-details th.product-name,
  .woocommerce-table--order-details td.product-name{
    width:72% !important;
  }

  /* Total column narrow, aligned right */
  .woocommerce-table--order-details th.product-total,
  .woocommerce-table--order-details td.product-total{
    width:28% !important;
    white-space:nowrap;
    text-align:right;
  }

  /* Allow text to wrap in product cell */
  .woocommerce-table--order-details td.product-name{
    padding-right:10px;
  }

  .woocommerce-table--order-details td.product-name .order-product-name{
    display:block;
    white-space:normal;
    word-break:break-word;
  }
} /* <-- THIS closing brace was missing in your paste */



/* =========================================================
   CENOTEKA PATCH: show classic radio circles (option 1)
   Add this at the END of the file
   ========================================================= */

/* 1) Undo the hiding of radios */
#cenoteka_retailer_select_field .woocommerce-input-wrapper input[type="radio"]{
  position: static !important;
  left: auto !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
}

/* 2) Layout: radio left + card content right */
#cenoteka_retailer_select_field .woocommerce-input-wrapper label.cen-ret-radio{
  display: flex !important;
  align-items: center;
  gap: 10px;
}

/* keep card looking the same */
#cenoteka_retailer_select_field .woocommerce-input-wrapper label.cen-ret-radio .cen-ret-option{
  flex: 1;
  justify-content: flex-start; /* nicer with radio on left */
}

/* 3) Optional: make radio a bit larger and clearly clickable */
#cenoteka_retailer_select_field .woocommerce-input-wrapper label.cen-ret-radio input[type="radio"]{
  transform: scale(1.1);
  margin: 0;
  cursor: pointer;
}

/* 4) Selected state for your real markup (input inside label) */
#cenoteka_retailer_select_field label.cen-ret-radio:has(input[type="radio"]:checked) .cen-ret-option{
  background:#111;
  color:#fff;
  border-color:#111;
  transform: translateY(-1px);
}

/* 5) Mobile: keep nice spacing */
@media (max-width:480px){
  #cenoteka_retailer_select_field .woocommerce-input-wrapper label.cen-ret-radio{
    align-items: flex-start;
  }
}


/* =========================================================
   CENOTEKA FINAL TUNE: perfect radio alignment
   ========================================================= */

/* Ensure radio is vertically centered even with multiline text */
#cenoteka_retailer_select_field .woocommerce-input-wrapper label.cen-ret-radio{
  align-items: center !important;
}

/* Keep radio vertically centered relative to the whole card */
#cenoteka_retailer_select_field
.woocommerce-input-wrapper
label.cen-ret-radio
> input[type="radio"]{
  align-self: center;
  margin-top: 0;
}

/* Make text block stack nicely (name + description) */
#cenoteka_retailer_select_field .cen-ret-option{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

/* Subtext under name (for "Najeftino") */
#cenoteka_retailer_select_field .cen-ret-sub{
  font-size: 12px;
  line-height: 1.25;
  opacity: 0.85;
}

/* When selected, keep subtext readable on dark bg */
#cenoteka_retailer_select_field
label.cen-ret-radio:has(input[type="radio"]:checked)
.cen-ret-sub{
  opacity: 0.9;
}

/* Mobile: keep radio nicely aligned on top if very narrow */
@media (max-width: 420px){
  #cenoteka_retailer_select_field .woocommerce-input-wrapper label.cen-ret-radio{
    align-items: flex-start !important;
  }

  #cenoteka_retailer_select_field
  .woocommerce-input-wrapper
  label.cen-ret-radio
  > input[type="radio"]{
    margin-top: 4px;
  }
}