/* CodForm core styles using CSS variables for easy theming */
:root{
  --codform-border-color:#5580FF;
  --codform-button-bg:#5580FF;
  --codform-button-text:#ffffff;
  --codform-button-hover:#4a6de0;
}

#custom-checkout-form{background:#F9F9F9;border:1px solid rgba(224,224,224,.8);width:100%;max-width:630px;margin:20px auto;padding:20px 30px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,0.08);font-family:'Cairo',sans-serif;line-height:1.4}

#custom-checkout-form input[type="text"],
#custom-checkout-form input[type="email"],
#custom-checkout-form input[type="tel"],
#custom-checkout-form select,
#custom-checkout-form textarea{width:100%;border:0.7px solid var(--codform-border-color);padding:12px;border-radius:8px;background:#fff;color:#495057;box-shadow:inset 0 0 6px rgba(0,0,0,0.04);transition:box-shadow .12s ease,border-color .12s ease;-webkit-appearance:none}
#custom-checkout-form input[type="text"]:focus,#custom-checkout-form input[type="email"]:focus,#custom-checkout-form input[type="tel"]:focus,#custom-checkout-form select:focus,#custom-checkout-form textarea:focus{outline:none;border-color:var(--codform-border-color);box-shadow:0 6px 18px rgba(85,128,255,0.06),0 0 0 6px rgba(85,128,255,0.06)}

/* Premium field states: name (warm highlight) and phone (cool highlight) */
input[name="billing_first_name"]:focus{border-color:#ffb34d;box-shadow:0 6px 18px rgba(255,179,77,0.08),0 0 0 6px rgba(255,179,77,0.06);background:#fff7ef}
input[name="billing_phone"]:focus{border-color:var(--codform-button-bg);box-shadow:0 6px 18px rgba(85,128,255,0.08),0 0 0 6px rgba(85,128,255,0.06);background:#fff}

.codform-field-error{color:#cc2b2b;font-size:13px;margin-top:6px;display:block}

#custom-checkout-form button[type="submit"],
.full-width-button{background:var(--codform-button-bg);color:var(--codform-button-text);border-radius:4px;cursor:pointer;font-size:15px;padding:12px;box-shadow:0 4px 8px rgba(0,0,0,0.08);width:100%;display:block}
#custom-checkout-form button[type="submit"]:hover,.full-width-button:hover{background:var(--codform-button-hover)}

.order-review{margin-top:12px;font-family:'Cairo',sans-serif}
.order-summary .order-item{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #eee}

.quantity-wrapper{display:flex;align-items:center;gap:8px}
.quantity-wrapper input{width:70px;text-align:center}

/* Compact form spacing */
.field-container{margin-bottom:10px;position:relative}
/* Inputs inside the custom form should make space for the icon stickers */
#custom-checkout-form .field-container input[type="text"],
#custom-checkout-form .field-container input[type="tel"],
#custom-checkout-form .field-container input[type="email"],
#custom-checkout-form .field-container select,
#custom-checkout-form .field-container textarea,
#custom-checkout-form .field-container input[type="number"] {
  padding-left:44px; /* Space for the sticker */
  padding-right:12px;
  height:44px;
}
#custom-checkout-form:dir(rtl) .field-container input[type="text"],
#custom-checkout-form:dir(rtl) .field-container input[type="tel"],
#custom-checkout-form:dir(rtl) .field-container input[type="email"],
#custom-checkout-form:dir(rtl) .field-container select,
#custom-checkout-form:dir(rtl) .field-container textarea,
#custom-checkout-form:dir(rtl) .field-container input[type="number"] {
  padding-right:44px; /* RTL mirror */
  padding-left:12px;
}
.woocommerce-input-wrapper input, .woocommerce-input-wrapper select{padding:10px 12px;height:44px}

/* New action buttons layout: inline quantity + add-to-cart, buy now full width below */
.codform-actions{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.codform-inline{display:flex;gap:12px;align-items:center}
.codform-quantity{display:inline-flex;align-items:center;border:1px solid var(--codform-border-color);border-radius:8px;overflow:hidden}
.codform-quantity .codform-qty-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:0;background:white;cursor:pointer}
.codform-quantity input.codform-quantity-input{width:72px;border:0;text-align:center;padding:0;height:40px;font-size:15px}
.codform-btn{padding:10px 14px;border-radius:8px;min-width:0;cursor:pointer;font-weight:700;border:0;display:inline-flex;align-items:center;justify-content:center}
.codform-btn--outline{background:transparent;color:var(--codform-button-bg);border:2px solid var(--codform-button-bg)}
.codform-btn--fullwidth{width:100%;padding:14px;border-radius:10px}

/* Mobile: keep inline compact and buynow full width — non-fixed by default */
@media (max-width:768px){
  .codform-inline{justify-content:space-between}
  .codform-buynow-wrap{position:relative}
  .codform-inline{flex-wrap:nowrap}

  /* Default (non-fixed) mobile actions: keep inline quantity + Add-to-Cart visible and Buy Now full width below */
  .codform-actions{
    position:static; /* NOT fixed — prevents floating / sticky behavior */
    left:auto;
    right:auto;
    bottom:auto;
    padding:10px 6px;
    background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,250,250,0.94));
    justify-content:center;
    z-index:auto;
    display:flex;
    flex-direction:column;
    gap:8px;
    box-shadow:none;
    border-radius:8px;
    margin-top:12px;
  }

  /* If you really want a fixed buy bar, add the class `codform-actions--fixed` to `.codform-actions` */
  .codform-actions.codform-actions--fixed{
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    padding:12px;
    background:rgba(255,255,255,0.98);
    justify-content:center;
    z-index:9999;
    display:flex;
    flex-direction:column;
    gap:8px;
    box-shadow:0 8px 30px rgba(0,0,0,0.12);
    border-radius:12px;
  }

  .codform-actions .codform-inline{align-items:center;justify-content:space-between}
  .codform-actions .codform-btn--outline{display:inline-flex;width:auto;min-width:40%;flex:0 0 auto;background:#fff;color:var(--codform-button-bg);border:2px solid var(--codform-button-bg);box-shadow:0 6px 18px rgba(0,0,0,0.06);padding:10px 12px;border-radius:8px}
  .codform-actions .codform-quantity{margin-right:8px}
  .codform-actions .codform-btn--primary{width:100%}

  /* Don’t add extra bottom padding when actions aren't fixed */
  .codform-actions.codform-actions--fixed ~ #custom-checkout-form{padding-bottom:140px}
}

/* Quantity component */
.codform-quantity{display:inline-flex;align-items:stretch;border:1px solid var(--codform-border-color);border-radius:8px;overflow:hidden}
.codform-quantity .codform-qty-btn{width:40px;height:48px;display:inline-flex;align-items:center;justify-content:center;border:0;background:white;cursor:pointer}
.codform-quantity .codform-qty-btn.codform-qty-increase{background:var(--codform-button-bg);color:var(--codform-button-text)}
.codform-quantity input.codform-quantity-input{width:56px;border:0;text-align:center;padding:0;height:48px;font-size:15px}

/* Product card polish */
.codform-product-card{background:#fff;border-radius:14px;padding:16px;box-shadow:0 8px 28px rgba(33,44,64,0.06);border:1px solid rgba(0,0,0,0.03)}

.codform-actions-buttons{display:flex;gap:12px;align-items:center}

/* Quantity component */
.codform-quantity{display:inline-flex;align-items:stretch;border:1px solid var(--codform-border-color);border-radius:8px;overflow:hidden}
.codform-quantity .codform-qty-btn{width:40px;height:48px;display:inline-flex;align-items:center;justify-content:center;border:0;background:white;cursor:pointer}
.codform-quantity .codform-qty-btn.codform-qty-increase{background:var(--codform-button-bg);color:var(--codform-button-text)}
.codform-quantity input.codform-quantity-input{width:56px;border:0;text-align:center;padding:0;height:48px;font-size:15px}

/* Product card polish */
.codform-product-card{background:#fff;border-radius:14px;padding:16px;box-shadow:0 8px 28px rgba(33,44,64,0.06);border:1px solid rgba(0,0,0,0.03)}

.codform-actions-buttons{display:flex;gap:12px;align-items:center}

/* Swatches */
.codform-swatch{display:inline-block;width:28px;height:28px;border-radius:50%;margin:6px;border:2px solid rgba(0,0,0,0.06);cursor:pointer}
.codform-swatch.selected{box-shadow:0 0 0 4px rgba(85,128,255,0.14);border-color:var(--codform-button-bg)}

/* Field sticker (icon inside inputs) */
.field-container{position:relative;border:none !important;background:transparent;padding:0}
.woocommerce-input-wrapper{position:relative;border:none !important;padding:0;background:transparent}
.woocommerce-input-wrapper .field-sticker{position:absolute;top:50%;right:12px;left:auto;transform:translateY(-50%);pointer-events:none;color:var(--codform-button-bg);font-size:18px;z-index:6}
.field-sticker{position:absolute;top:50%;left:12px;transform:translateY(-50%);pointer-events:none;color:var(--codform-button-bg);font-size:18px;z-index:4}
.woocommerce-input-wrapper input{padding-left:46px}
.woocommerce-input-wrapper select{padding-left:46px}

/* Make stickers show a green fill when field is valid */
.field-sticker.field-valid{background:linear-gradient(90deg,#4caf50,#2e7d32);color:#ffffff;border-radius:999px;padding:6px;border:0}

/* Hide other theme-provided raw icons inside the field container to avoid duplicates */
.field-container > i, .field-container > .icon, .field-container .input-icon, .field-container .field-icon { display:none !important; }

/* Quantity and Add-to-cart fixed ratio (30% / 70%) */
.codform-inline .codform-quantity{flex:0 0 30%;max-width:30%}
.codform-inline .custom-add-to-cart, .codform-inline #add-to-cart-button{flex:0 0 70%;width:70%;display:inline-flex;align-items:center;justify-content:center}

/* Quantity visibility and contrast fixes */
.codform-quantity{background:#f7f9fc}
.codform-quantity .codform-qty-btn{background:var(--codform-button-bg);color:#fff;border-radius:6px}
.codform-quantity input.codform-quantity-input{background:transparent;color:#222;text-align:center}

/* Progress bar */
.codform-progress{margin-bottom:12px}
.codform-progress-bar{height:8px;background:#e9eef6;border-radius:99px;overflow:hidden}
.codform-progress-fill{height:100%;background:linear-gradient(90deg,#4caf50,#2e7d32);width:0}
.codform-progress-text{font-size:13px;text-align:right;margin-top:6px;color:#2e7d32}

/* RTL support: place icon on the right when page is RTL */
.rtl #custom-checkout-form .field-sticker,#custom-checkout-form:dir(rtl) .field-sticker{left:auto;right:12px}
.rtl #custom-checkout-form .woocommerce-input-wrapper input,#custom-checkout-form:dir(rtl) .woocommerce-input-wrapper input{padding-left:12px;padding-right:46px}

/* interactive sticker color on focus */
.field-container input:focus ~ .field-sticker,
.field-container select:focus ~ .field-sticker,
.field-container textarea:focus ~ .field-sticker{color:var(--codform-button-bg);transform:translateY(-50%) scale(1.02)}

/* Ensure mobile form has space for fixed buy bar */
@media (max-width:768px){
  #custom-checkout-form{padding-bottom:140px}
}



@media (max-width:768px){.codform-actions{justify-content:space-between}.codform-btn{min-width:140px}
/* Keep 30/70 split on small screens too */
.codform-inline{display:flex;gap:12px}.codform-inline .codform-quantity{flex:0 0 30%}.codform-inline .custom-add-to-cart{flex:0 0 70%;width:70%} }


.variation-swatch{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:12px;border:1px solid #ddd;margin:4px;cursor:pointer;font-weight:700}
.variation-swatch.disabled{opacity:.45;pointer-events:none;filter:grayscale(80%)}

.codform-promo-input input{width:80%;display:block;margin:0 auto;padding:10px;border-radius:10px;border:2px solid #4CAF50;text-align:center}

@media (max-width:768px){#custom-checkout-form{padding:16px;margin:12px} .quantity-wrapper input{width:60px}}
@media (max-width:480px){#custom-checkout-form{padding:12px} .codform-actions{flex-direction:column;align-items:stretch}.codform-btn{width:100%;min-width:auto}}

/* Glassy form and pro inputs (appended) */
.codform-glass{
  background: linear-gradient(180deg, rgba(255,255,255,0.58), rgba(240,245,255,0.52));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 12px 40px rgba(10,18,30,0.09), inset 0 1px 0 rgba(255,255,255,0.6);
  border-radius: 14px;
  padding: 18px;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}

/* Make form look elevated on product pages */
#custom-checkout-form{transition:transform .12s ease,box-shadow .12s ease}
#custom-checkout-form:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(10,18,30,0.08)}

/* Inputs spacing and visual polish */
#custom-checkout-form .field-container{margin-bottom:16px}
#custom-checkout-form .woocommerce-input-wrapper input,#custom-checkout-form .woocommerce-input-wrapper select,#custom-checkout-form .woocommerce-input-wrapper textarea,#custom-checkout-form input[type="number"]{padding:12px 14px 12px 52px;border-radius:10px;border:1px solid rgba(100,120,200,0.08);background:linear-gradient(180deg, #fff, #fbfdff);box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);transition:box-shadow .14s ease,border-color .14s ease,transform .08s ease}
#custom-checkout-form:dir(rtl) .woocommerce-input-wrapper input{padding-right:52px;padding-left:14px}
#custom-checkout-form .woocommerce-input-wrapper input:focus,#custom-checkout-form .woocommerce-input-wrapper select:focus,#custom-checkout-form .woocommerce-input-wrapper textarea:focus{outline:none;border-color:var(--codform-border-color);box-shadow:0 12px 36px rgba(85,128,255,0.08),0 0 0 8px rgba(85,128,255,0.05);transform:translateY(-1px)}

/* Make stickers slightly smaller and perfectly vertically centered */
.field-sticker{font-size:16px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center}
.woocommerce-input-wrapper .field-sticker{width:36px;height:36px;border-radius:999px;background:rgba(85,128,255,0.06);border:1px solid rgba(85,128,255,0.08);color:var(--codform-button-bg);font-size:14px;padding:8px}

/* Placeholder color and input polish */
#custom-checkout-form ::placeholder{color:#9aa7b6}
#custom-checkout-form .woocommerce-input-wrapper input{background:linear-gradient(180deg,#fff,#fbfdff)}

/* Quantity and buttons spacing improvements */
.codform-quantity{border-radius:10px}
.codform-quantity .codform-qty-btn{width:36px;height:40px}
.codform-quantity input.codform-quantity-input{width:56px;height:40px}
.codform-btn{padding:12px 18px}
.codform-btn--outline{padding:10px 14px}

/* Desktop tweak: add subtle left/right padding to the form container */
@media(min-width:769px){#custom-checkout-form{padding:22px} .codform-inline{align-items:center} .codform-inline .codform-btn--outline{min-width:180px;flex:0 0 auto}
/* Ensure custom add-to-cart keeps a consistent width */

/* Remove the 4-box visual grid and make fields float naturally */
#custom-checkout-form table{border-collapse:collapse;background:transparent}
#custom-checkout-form td{border:none;background:transparent;padding:6px}
#custom-checkout-form .woocommerce-input-wrapper{padding:8px;background:linear-gradient(180deg,#fff,#fbfdff);border-radius:12px;box-shadow:0 6px 18px rgba(10,18,30,0.04);border:1px solid rgba(0,0,0,0.03)}

/* Center icons perfectly */
.woocommerce-input-wrapper .field-sticker{display:flex;align-items:center;justify-content:center}
.field-sticker i{display:flex;align-items:center;justify-content:center;width:100%;height:100%}

/* Quantity visual fixes: equal square buttons and readable number */
.codform-quantity .codform-qty-btn{width:48px;height:48px;border-radius:6px}
.codform-quantity input.codform-quantity-input{background:#fff;color:#111;padding:0 8px;height:48px;width:56px}
.codform-quantity{border-radius:10px;overflow:hidden}
.codform-inline .custom-add-to-cart{min-width:180px;display:inline-flex;align-items:center;justify-content:center} }