/* ========== LuxCOD Form – JJDID PRO DESIGN V5 (FINAL) ========== */

/* Wrapper */
.luxcod-wrapper{
  font-family: 'Cairo', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#fff;
  border:2px dashed color-mix(in oklab,var(--lux-brand,#6D28D9) 40%, #e5e7eb);
  border-radius:var(--lux-radius,22px);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  padding:18px;
  max-width:720px;
}

/* Head */
.luxcod-head h3{
  margin:0 0 12px;
  font-weight:900;
  color:color-mix(in oklab,var(--lux-brand,#6D28D9) 85%, var(--lux-brand2,#9333EA) 15%);
  text-align:center;
}

/* Grid */
.luxcod-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.luxcod-row.full{grid-column:1 / -1}
.luxcod-row label { display: none; }

/* Inputs */
.luxcod-input-wrap{
  position:relative;display:flex;align-items:center;gap:0;
  border:1px solid #d1d5db;border-radius:14px;padding:0;overflow:hidden;min-height:46px;background:#fff
}
.luxcod-ic{
  opacity:1;width:46px;height:46px;min-width:46px;
  display:flex;align-items:center;justify-content:center;
  background:#F3F4F6;border-right:1px solid #E5E7EB
}
[dir='rtl'] .luxcod-ic{border-right:0;border-left:1px solid #E5E7EB}

/* === FIX ICONS (size + color + stroke + focus) === */
.luxcod-ic{ color: var(--lux-brand, #6D28D9); }
.luxcod-ic svg{ width:20px;height:20px;display:block }
.luxcod-ic svg,
.luxcod-ic svg * {
  /* Ensure icons render as outline instead of solid. */
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
/* فوكس على الحقل: نبرز الأيقونة شوية */
.luxcod-input-wrap:focus-within .luxcod-ic{
  background: color-mix(in oklab,var(--lux-brand,#6D28D9) 12%, #F3F4F6);
  color: var(--lux-brand,#6D28D9);
}

/* Input core */
.luxcod-input,
.luxcod-submit,
.luxcod-wa { font-family: 'Cairo', sans-serif; }
.luxcod-input{border:none;outline:0;font-size:15px;width:100%;background:transparent;padding:12px 14px;height:46px}
.luxcod-cc{border:none;background:transparent;font-size:14px;min-width:90px;direction:ltr;border-right:1px solid #E5E7EB}
[dir='rtl'] .luxcod-cc{border-right:0;border-left:1px solid #E5E7EB}

/* Offer Cards */
.luxcod-offers{
  margin: 16px 0 6px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.luxcod-offer{
  border: 2px solid #e5e7eb;
  border-radius:20px;
  padding:14px 16px;
  background:#f9fafb;
  cursor:pointer;
  display:block;
  position:relative;
  transition: all .3s ease;
  overflow: hidden;
}
.luxcod-offer.active {
  border-color: var(--lux-brand, #6D28D9);
  background: color-mix(in oklab, var(--lux-brand, #6D28D9) 12%, transparent);
  box-shadow: 0 10px 30px color-mix(in oklab, var(--lux-brand, #6D28D9) 15%, transparent);
}
.luxcod-offer-body{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.luxcod-offer-media{position:relative;width:74px;height:74px;border-radius:18px;border:2px dotted color-mix(in oklab,var(--lux-brand,#6D28D9) 40%, #e5e7eb);display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:inset 0 0 0 8px #faf5ff}
.luxcod-offer-media img{max-width:60px;max-height:60px;object-fit:contain;border-radius:10px}
.luxcod-offer-check{position:absolute;inset-inline-start:-10px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;border:2px solid color-mix(in oklab,var(--lux-brand,#6D28D9) 70%, #c7d2fe);background:#fff}
.luxcod-offer.active .luxcod-offer-check{background:var(--lux-brand, #6D28D9);box-shadow:inset 0 0 0 4px #fff}
.luxcod-offer-title{font-weight:900;color:#1F2937;font-size:16px}
.luxcod-offer-sub{margin-top:2px;font-size:12px;color:#6b7280}
.luxcod-offer-prices{margin-top:6px;display:flex;gap:10px;align-items:center}
.luxcod-price-now{font-weight:900;direction:ltr;white-space:nowrap}
.luxcod-price-compare{opacity:.55;text-decoration:line-through}

.luxcod-bar-badge {
  position: absolute; top: 14px; right: -40px;
  background: var(--lux-brand, #5b21b6); color: #fff;
  font-size: 12px; font-weight: 700; padding: 6px 10px; width: 150px;
  text-align: center; transform: rotate(45deg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 2; transition: opacity .3s ease; opacity: 0;
}
.luxcod-offer.active .luxcod-bar-badge { opacity: 1; }

/* Summary (Legacy) */
.luxcod-summary{
  background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;margin-top:6px
}
.luxcod-summary span{color:#4c1d95}
.luxcod-summary .luxcod-summary-price{color:#6D28D9;font-weight:900;direction:ltr;white-space:nowrap}

/* Submit Button */
.luxcod-submit{
  width:100%;border:none;border-radius:12px;
  background:linear-gradient(135deg,var(--lux-brand,#6D28D9),var(--lux-brand2,#9333EA));
  color:#fff;font-weight:800;padding:14px 16px;font-size:16px;cursor:pointer;
  animation: pulse-scale-main 2s infinite;
}
.luxcod-note{min-height:20px;font-size:13px;margin-top:6px}

@keyframes pulse-scale-main { 0%{transform:scale(1)} 50%{transform:scale(1.05)} 100%{transform:scale(1)} }

/* Quantity stepper */
.luxcod-qtybox{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:12px}
.luxcod-qtybox .lbl{color:#374151}
.luxcod-qtybox .stepper{display:inline-flex;flex-wrap:nowrap;align-items:center;width:auto;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff}
.luxcod-qtybox .stepper input{width:56px;min-width:56px;max-width:56px;text-align:center;border:none !important;height:36px;outline:0;background:transparent;box-shadow:none !important;margin:0 !important;padding:0 !important}
.luxcod-qtybox .stepper button{width:36px;min-width:36px;height:36px;border:0 !important;background:#f3f4f6;cursor:pointer;font-size:18px;line-height:1;padding:0 !important;box-shadow:none !important}
.luxcod-qtybox .stepper button:active{transform:translateY(1px)}
.luxcod-wrapper input[type=number]{-moz-appearance:textfield}
.luxcod-wrapper input[type=number]::-webkit-outer-spin-button,
.luxcod-wrapper input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Badges */
.luxcod-badges{margin-top:14px;padding-top:10px;border-top:1px dashed color-mix(in oklab,var(--lux-brand,#6D28D9) 40%, #e5e7eb);display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.luxcod-badge{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;border:1px solid #eee;border-radius:12px;background:#fff}
.luxcod-badge-ic{width:32px;height:32px;color:color-mix(in oklab,var(--lux-brand,#6D28D9) 85%, var(--lux-brand2,#9333EA) 15%);display:flex;align-items:center;justify-content:center}
.luxcod-badge-ic svg{width:100%;height:100%}
.luxcod-badge-txt{font-size:12px;color:#1F2937;font-weight:700;text-align:center}

/* Coupon */
.luxcod-coupon{margin-top:8px}
.luxcod-coupon label{font-size:13px;color:#374151;margin-bottom:6px;display:block;font-weight:700}
.luxcod-coupon-row{display:flex;gap:8px;align-items:center}
.luxcod-coupon-row .luxcod-input{height:44px;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px}
.luxcod-coupon-apply{height:44px;padding:0 14px;border:none;border-radius:12px;cursor:pointer;font-weight:800;background:linear-gradient(135deg,var(--lux-brand,#6D28D9),var(--lux-brand2,#9333EA));color:#fff;box-shadow:0 10px 20px rgba(109,40,217,.12)}
.luxcod-coupon-apply[data-applied="1"]{background:#111827}
.luxcod-coupon-note{display:block;margin-top:6px;color:#6b7280;font-size:12px;min-height:16px}

/* Accordion Summary Styles */
.luxcod-summary-accordion {margin-top: 16px;background-color: #fff;border-radius: 16px;box-shadow: 0 4px 16px rgba(0,0,0,0.07);overflow: hidden;border: 1px solid #e5e7eb;}
.luxsum-accordion-header {display: flex;justify-content: space-between;align-items: center;padding: 16px;cursor: pointer;-webkit-tap-highlight-color: transparent;transition: background-color 0.2s ease;}
.luxsum-accordion-header:hover {background-color: #f9fafb;}
.luxsum-header-left {display: flex;align-items: center;gap: 12px;}
.luxsum-header-icon {color: var(--lux-brand, #6D28D9);}
.luxsum-header-icon svg { width: 28px; height: 28px; }
.luxsum-header-title h2 {font-size: 16px;font-weight: 700;color: #1f2937;margin: 0;}
.luxsum-header-title p {font-size: 13px;color: #6b7280;margin: 2px 0 0;transition: opacity 0.3s ease;}
.luxsum-header-right {display: flex;align-items: center;gap: 12px;}
.luxsum-header-total {font-size: 18px;font-weight: 800;color: var(--lux-brand, #6D28D9);direction: ltr;}
.luxsum-accordion-arrow {color: #9ca3af;transition: transform 0.3s ease-in-out;}
.luxsum-accordion-header.active .luxsum-accordion-arrow {transform: rotate(180deg);}
.luxsum-accordion-content {padding: 0 16px;max-height: 0;overflow: hidden;transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out, border-top 0.3s ease;border-top: 1px solid transparent;}
.luxsum-accordion-content.active {padding: 16px;padding-top: 0;max-height: 500px;border-top: 1px solid #e5e7eb;}
.luxsum-rows {display: flex;flex-direction: column;gap: 12px;padding-top: 16px;}
.luxsum-row {display: flex;justify-content: space-between;align-items: center;gap: 10px;}
.luxsum-label {font-size: 15px;color: #4b5563;font-weight: 500;}
.luxsum-value {font-size: 15px;font-weight: 600;color: #1f2937;direction: ltr;}
.luxsum-row.luxsum-shipping .luxsum-value {color: #16a34a;font-weight: 700;}
.luxsum-row.luxsum-discount .luxsum-value {color: #16a34a;font-weight: 700;}
.luxsum-total {padding-top: 14px;margin-top: 14px;border-top: 2px solid #374151;}
.luxsum-total .luxsum-label {font-weight: 800;font-size: 17px;color: #111827;}
.luxsum-total .luxsum-value strong {font-weight: 900;font-size: 20px;color: var(--lux-brand, #6D28D9);}

/* Popup Styles */
.luxcod-open-popup-btn {width: 100%;border: none;border-radius: 12px;color: #fff;font-weight: 800;padding: 14px 16px;font-size: 16px;cursor: pointer;transition: transform 0.2s ease;box-shadow: 0 8px 20px rgba(0,0,0,.15);}
.luxcod-open-popup-btn:hover {transform: translateY(-2px);}
.luxcod-popup-overlay {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);z-index: 10000;backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);}
.luxcod-popup-wrapper {display: none;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);max-height: 90vh;overflow-y: auto;z-index: 10001;}
.luxcod-popup-close-btn {position: absolute;top: 8px;right: 8px;background: rgba(255, 255, 255, 0.8);border: 1px solid #ddd;border-radius: 50%;width: 32px;height: 32px;font-size: 24px;line-height: 1;font-weight: bold;color: #555;cursor: pointer;z-index: 10;padding: 0;display: flex;align-items: center;justify-content: center;}
[dir="rtl"] .luxcod-popup-close-btn {right: auto;left: 8px;}
.luxcod-popup-close-btn:hover {background: #fff;color: #000;}
.luxcod-popup-sticky-trigger {position: fixed;bottom: 20px;left: 50%;transform: translateX(-50%);z-index: 9998;padding: 14px 28px;border-radius: 999px;border: none;font-weight: 800;font-size: 16px;color: #fff;background: linear-gradient(135deg, var(--lux-brand, #6D28D9), var(--lux-brand2, #9333EA));box-shadow: 0 10px 30px rgba(0,0,0,0.2);cursor: pointer;transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;animation: luxcod-pulse-sticky 2.5s infinite;white-space: nowrap;}
.luxcod-popup-sticky-trigger:hover {transform: translateX(-50%) scale(1.05);animation-play-state: paused;}
@keyframes luxcod-pulse-sticky {0% {box-shadow: 0 8px 25px rgba(0,0,0,0.15), 0 0 0 0 rgba(109, 40, 217, 0.5);} 70% {box-shadow: 0 8px 25px rgba(0,0,0,0.15), 0 0 0 15px rgba(109, 40, 217, 0);} 100% {box-shadow: 0 8px 25px rgba(0,0,0,0.15), 0 0 0 0 rgba(109, 40, 217, 0);}}

/* Responsive */
@media (max-width:640px){.luxcod-grid{grid-template-columns:1fr}}
@media (max-width:480px){ .luxcod-badges{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 768px) { .luxcod-popup-wrapper {width: 95%;} }

/* =============================================
   ===[ NEW STICKY CTA STYLES - FINAL VERSION ]===
   ============================================= */
.luxcod-sticky-legacy{ position:fixed; left:0; bottom:0; width:100%; z-index:999; }
.luxcod-sticky-legacy button{
  font-family:'Cairo',sans-serif; background:linear-gradient(135deg,var(--lux-brand),var(--lux-brand2));
  color:#fff; font-weight:900; border:none; border-radius:0; padding:18px 20px; font-size:20px; cursor:pointer; width:100%;
  box-shadow:0 -4px 15px rgba(0,0,0,.1), 0 0 25px var(--lux-brand2); animation:pulse-scale-sticky 2s infinite; box-sizing:border-box;
}
@keyframes pulse-scale-sticky{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}

.luxcod-sticky-universal{
  position:fixed; bottom:10px; left:50%; transform:translateX(-50%); width:calc(100% - 20px); max-width:500px;
  background:#fff; box-shadow:0 8px 30px rgba(0,0,0,.12); z-index:1000; padding:12px; display:flex; align-items:center; gap:12px;
  border-radius:16px; border:1px solid #eef0f3; transition:opacity .3s ease, transform .3s ease; box-sizing:border-box;
}
.luxcod-sticky-universal.hidden{ opacity:0; transform:translate(-50%,120%); }
.luxcod-sticky-universal .lux-uni-img img{ width:60px; height:60px; border-radius:12px; object-fit:cover; flex-shrink:0; }
.luxcod-sticky-universal .lux-uni-details{ flex-grow:1; text-align:right; overflow:hidden; }
.luxcod-sticky-universal .lux-uni-details h4{ margin:0 0 4px 0; font-size:14px; font-weight:700; color:#1f2937; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.luxcod-sticky-universal .lux-uni-prices{ display:flex; align-items:center; gap:8px; }
.luxcod-sticky-universal .lux-uni-prices .price-now,
.luxcod-sticky-universal .lux-uni-prices .woocommerce-Price-amount{ font-size:16px; font-weight:900; color:var(--lux-brand); }
.luxcod-sticky-universal .lux-uni-prices .price-compare,
.luxcod-sticky-universal .lux-uni-prices del .woocommerce-Price-amount{ font-size:13px; color:#9ca3af; text-decoration:line-through; }
.luxcod-sticky-universal .lux-uni-btn button{
  font-family:'Cairo',sans-serif; background:linear-gradient(135deg,var(--lux-brand),var(--lux-brand2)); color:#fff; border:none; padding:12px 18px;
  font-size:15px; font-weight:700; border-radius:12px; cursor:pointer; white-space:nowrap;
  box-shadow:0 5px 15px color-mix(in oklab, var(--lux-brand) 60%, transparent); transition:transform .2s ease, box-shadow .2s ease; display:flex; align-items:center; gap:8px;
}
.luxcod-sticky-universal .lux-uni-btn button:hover{ transform:scale(1.05); box-shadow:0 8px 20px color-mix(in oklab, var(--lux-brand) 70%, transparent); }
.luxcod-sticky-universal .lux-uni-btn button svg{ stroke-width:2.5; }
@media (max-width:480px){
  .luxcod-sticky-universal{ width:calc(100% - 16px); bottom:8px; padding:10px; }
  .luxcod-sticky-universal .lux-uni-img img{ width:50px; height:50px; }
  .luxcod-sticky-universal .lux-uni-btn button{ padding:10px 12px; font-size:14px; }
  .luxcod-sticky-universal .lux-uni-btn button span{ display:none; }
  .luxcod-sticky-legacy button{ padding:16px 20px; font-size:18px; }
}
/* ====== 1) Select native = نفس ستايل input ====== */
.luxcod-input-wrap select.luxcod-input{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  height: 46px;
  padding: 12px 14px;
  width: 100%;
  font-size: 15px;
  color: inherit;
  box-shadow: none !important;
  cursor: pointer;
}
.luxcod-input-wrap select.luxcod-input option[disabled][value=""],
.luxcod-input-wrap select.luxcod-input option[disabled][selected]{
  color:#9CA3AF;
}

/* فوكس موحّد بحال input */
.luxcod-input-wrap:focus-within{
  border-color: color-mix(in oklab,var(--lux-brand,#6D28D9) 60%, #c7d2fe);
  box-shadow: 0 0 0 3px color-mix(in oklab,var(--lux-brand,#6D28D9) 20%, transparent);
}

.luxcod-ic{
  border-right: 0;
  position: relative;
  background:#F3F4F6;
}
.luxcod-ic::after{
  content:'';
  position:absolute; top:0; bottom:0;
  inset-inline-end:0;
  width:1px; background:#E5E7EB;
}
[dir='rtl'] .luxcod-ic::after{ inset-inline-start:0; inset-inline-end:auto; }

.luxcod-input-wrap :where(input, textarea, select){
  outline:0 !important;
  box-shadow:none !important;
  border:0 !important;
}

.luxcod-input-wrap .select2-container{ width:100% !important; }
.luxcod-input-wrap .select2-selection--single{
  border:0 !important; background:transparent !important; height:46px !important; border-radius:0 !important;
}
.luxcod-input-wrap .select2-selection__rendered{ line-height:46px !important; padding-inline:14px !important; }
.luxcod-input-wrap .select2-selection__arrow{ display:none !important; }

.luxcod-input-wrap .choices,
.luxcod-input-wrap .choices__inner{
  border:0 !important; background:transparent !important; min-height:46px !important; padding:0 !important;
}
.luxcod-input-wrap .choices__list--single{ padding:12px 14px !important; }

/* START: CODE FOR VARIATIONS AND WHATSAPP BUTTON */

/* Variations Compatibility: Hide original button but keep swatches */
form.variations_form .quantity,
form.variations_form .single_add_to_cart_button {
    display: none !important;
}

/* Call Time Section Container */
.luxcod-calltime {
  margin-top: 16px;
  padding: 14px;
  background-color: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 18px;
}

.luxcod-calltime-label {
  font-weight: 700;
  color: #374151;
  margin-bottom: 10px;
  text-align: center;
  font-size: 15px;
}

.luxcod-calltime-options {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.luxcod-calltime-options label {
  position: relative;
}

.luxcod-calltime-options input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.luxcod-calltime-options span {
  display: block;
  padding: 10px 18px;
  border: 2px solid #e5e7eb;
  border-radius: 14px;
  background-color: #fff;
  color: #4b5563;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-size: 14px;
}

.luxcod-calltime-options input[type="radio"]:checked + span {
  border-color: var(--lux-brand, #6D28D9);
  background-color: color-mix(in oklab, var(--lux-brand, #6D28D9) 10%, #fff);
  color: var(--lux-brand, #6D28D9);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.luxcod-calltime-options input[type="radio"]:not(:checked) + span:hover {
  border-color: #d1d5db;
}

/* New WhatsApp Button Style */
.luxcod-wa {
  margin-top: 12px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  background-color: #25D366;
  color: #fff;
  border: 2px solid #25D366;
  transition: all 0.2s ease-in-out;
}

.luxcod-wa:hover {
  background-color: #128C7E;
  border-color: #128C7E;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
/* Force-hide the default WooCommerce add-to-cart elements */
.single-product form.cart .quantity,
.single-product form.cart button.single_add_to_cart_button {
    display: none !important;
}
/* 1. Force-hide the default WooCommerce add-to-cart elements */
.single-product form.cart .quantity,
.single-product form.cart button.single_add_to_cart_button {
    display: none !important;
}

/* 2. Force icon color to inherit the brand color */
.luxcod-ic,
.luxcod-ic svg,
.luxcod-ic svg * {
    fill: var(--lux-brand) !important;
    stroke: var(--lux-brand) !important;
    color: var(--lux-brand) !important;
}

/* END: CODE FOR VARIATIONS AND WHATSAPP BUTTON */