/* ═══════════════════════════════════════════════════════════════════════════
   WC Algeria Delivery Selector v3 — Frontend CSS
═══════════════════════════════════════════════════════════════════════════ */

/* Default CSS variables (overridden inline by PHP) */
:root {
    --wcad-form-bg:            #fff;
    --wcad-form-border-color:  #e0e0e0;
    --wcad-form-border-width:  1px;
    --wcad-form-border-radius: 12px;
    --wcad-form-padding:       20px;
    --wcad-form-max-width:     520px;
    --wcad-title-color:        #222;
    --wcad-title-size:         16px;
    --wcad-title-weight:       700;
    --wcad-label-color:        #333;
    --wcad-label-size:         13px;
    --wcad-label-weight:       600;
    --wcad-field-bg:           #f9f9f9;
    --wcad-field-border-color: #ccc;
    --wcad-field-border-width: 1px;
    --wcad-field-radius:       8px;
    --wcad-field-text:         #333;
    --wcad-field-font-size:    14px;
    --wcad-field-height:       48px;
    --wcad-field-icon-color:   #888;
    --wcad-placeholder-color:  #bbbbbb;
    --wcad-btn-active-bg:      #c8a96e;
    --wcad-btn-active-text:    #fff;
    --wcad-btn-inactive-bg:    #f0f0f0;
    --wcad-btn-inactive-text:  #555;
    --wcad-btn-radius:         8px;
    --wcad-summary-bg:         #fafafa;
    --wcad-summary-border:     #e8e8e8;
    --wcad-summary-text:       #333;
    --wcad-summary-total:      #c8a96e;
    --wcad-order-bg:           #c8a96e;
    --wcad-order-text:         #fff;
    --wcad-order-radius:       8px;
    --wcad-order-size:         16px;
}

/* ── Wrapper ── */
.wcad-delivery-form {
    background:    var(--wcad-form-bg);
    border:        var(--wcad-form-border-width) solid var(--wcad-form-border-color);
    border-radius: var(--wcad-form-border-radius);
    padding:       var(--wcad-form-padding);
    max-width:     var(--wcad-form-max-width);
    margin:        16px 0 24px;
    direction:     rtl;
    box-sizing:    border-box;
}
.wcad-delivery-form *, .wcad-delivery-form *::before, .wcad-delivery-form *::after {
    box-sizing: border-box;
}

/* ── Form title ── */
.wcad-form-title {
    color:         var(--wcad-title-color);
    font-size:     var(--wcad-title-size);
    font-weight:   var(--wcad-title-weight);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--wcad-form-border-color);
    text-align:    center;
}

/* ── Two-column row for names ── */
.wcad-row-2 { display: flex; gap: 10px; }
.wcad-col   { flex: 1; min-width: 0; }

/* ── Field wrapper ── */
.wcad-field-wrap { margin-bottom: 12px; }

/* ── Label — plain, sits above input ── */
.wcad-label {
    display:       flex;
    align-items:   center;
    gap:           6px;
    color:         var(--wcad-label-color);
    font-size:     var(--wcad-label-size);
    font-weight:   var(--wcad-label-weight);
    margin-bottom: 5px;
    cursor:        default;
    /* optional dashboard controls */
    background:    var(--wcad-label-bg);
    border:        var(--wcad-label-border-width) solid var(--wcad-label-border-color);
    border-radius: var(--wcad-label-radius);
    min-height:    var(--wcad-label-height);
    padding:       0 6px;
}

/* Icon inside label */
.wcad-label-icon {
    flex-shrink:  0;
    color:        var(--wcad-field-icon-color) !important;
    font-size:    16px !important;
    width:        16px !important;
    height:       16px !important;
    line-height:  1 !important;
    position:     relative;
    top:          1px;
}

/* ── Inputs ── */
.wcad-input {
    display:       block;
    width:         100%;
    height:        var(--wcad-field-height);
    background:    var(--wcad-field-bg);
    border:        var(--wcad-field-border-width) solid var(--wcad-field-border-color);
    border-radius: var(--wcad-field-radius);
    color:         var(--wcad-field-text);
    font-size:     var(--wcad-field-font-size);
    padding:       0 12px;
    font-family:   inherit;
    transition:    border-color .18s, box-shadow .18s;
    /* prevent iOS zoom (needs ≥16px equivalent) */
    font-size:     max(16px, var(--wcad-field-font-size));
    -webkit-appearance: none;
    appearance:    none;
}
.wcad-input:focus {
    outline:      none;
    border-color: var(--wcad-btn-active-bg);
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--wcad-btn-active-bg) 15%, transparent);
}
.wcad-input::placeholder { color: var(--wcad-placeholder-color); }
.wcad-select option[value=''] { color: var(--wcad-placeholder-color); }

/* ── Selects ── */
.wcad-select {
    display:       block;
    width:         100%;
    height:        var(--wcad-field-height);
    background:    var(--wcad-field-bg);
    border:        var(--wcad-field-border-width) solid var(--wcad-field-border-color);
    border-radius: var(--wcad-field-radius);
    color:         var(--wcad-field-text);
    font-family:   inherit;
    padding:       0 12px;
    cursor:        pointer;
    transition:    border-color .18s, box-shadow .18s;
    -webkit-appearance: none;
    appearance:    none;
    font-size:     max(16px, var(--wcad-field-font-size));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: left 12px center;
}
.wcad-select:focus {
    outline:      none;
    border-color: var(--wcad-btn-active-bg);
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--wcad-btn-active-bg) 15%, transparent);
}

/* ── Variations ── */
.wcad-variations .wcad-field-wrap { margin-bottom: 12px; }

/* ── Delivery type buttons ── */
.wcad-type-btns { display: flex; gap: 10px; }
.wcad-type-btn {
    flex:            1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             7px;
    padding:         12px 10px;
    background:      var(--wcad-btn-inactive-bg);
    color:           var(--wcad-btn-inactive-text);
    border:          2px solid transparent;
    border-radius:   var(--wcad-btn-radius);
    font-size:       var(--wcad-field-font-size);
    font-weight:     600;
    font-family:     inherit;
    cursor:          pointer;
    transition:      all .18s;
    /* mobile */
    touch-action:    manipulation;
    -webkit-tap-highlight-color: transparent;
    min-height:      48px;
}
.wcad-type-btn .dashicons {
    font-size: 18px !important; width: 18px !important; height: 18px !important;
}
.wcad-type-btn:hover    { border-color: var(--wcad-btn-active-bg); }
.wcad-type-btn--active  {
    background:   var(--wcad-btn-active-bg)   !important;
    color:        var(--wcad-btn-active-text)  !important;
    border-color: var(--wcad-btn-active-bg)   !important;
}

/* ── Shipping cost row ── */
.wcad-shipping-row {
    display:     flex;
    align-items: center;
    gap:         7px;
    margin:      10px 0;
    font-size:   var(--wcad-field-font-size);
    color:       var(--wcad-label-color);
}
.wcad-icon-sm {
    color:      var(--wcad-field-icon-color) !important;
    font-size:  17px !important;
    width:      17px !important;
    height:     17px !important;
}
.wcad-shipping-label { font-weight: 600; }
.wcad-shipping-value { color: var(--wcad-summary-total); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════
   QUANTITY — rebuilt for all phones
   Key fixes:
   - input is readonly (no keyboard pops up on mobile)
   - buttons use touch-action:manipulation (removes 300ms delay)
   - min touch size 52px (exceeds 44px WCAG minimum)
   - no native number spinners at all
═══════════════════════════════════════════════════════════════════════ */
.wcad-qty-control {
    display:      inline-flex;
    align-items:  stretch;
    height:       52px;           /* comfortable on all phones */
    min-height:   52px;
    border:       var(--wcad-field-border-width) solid var(--wcad-field-border-color);
    border-radius: var(--wcad-field-radius);
    overflow:     hidden;
    /* prevent shrinking inside flex parents */
    flex-shrink:  0;
    /* prevent layout collapse */
    width:        fit-content;
    max-width:    160px;
}

.wcad-qty-btn {
    /* fixed size, never shrinks */
    flex:             0 0 52px;
    width:            52px;
    height:           100%;
    min-width:        44px;       /* safety floor */
    background:       var(--wcad-field-bg);
    color:            var(--wcad-field-text);
    border:           none;
    /* big, finger-friendly font */
    font-size:        26px;
    font-weight:      300;
    line-height:      1;
    font-family:      system-ui, sans-serif;
    cursor:           pointer;
    /* critical mobile fixes */
    -webkit-appearance: none;
    appearance:       none;
    border-radius:    0;
    touch-action:     manipulation;   /* kills 300ms delay */
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select:      none;
    /* smooth feedback */
    transition:       background .12s, color .12s;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    /* iOS: prevent button from getting system styling */
    padding:          0;
    margin:           0;
}
.wcad-qty-btn:hover,
.wcad-qty-btn:active {
    background: var(--wcad-btn-active-bg);
    color:      var(--wcad-btn-active-text);
}
/* Clear focus ring on mobile (buttons are tapped, not focused) */
.wcad-qty-btn:focus { outline: none; }
.wcad-qty-btn:focus-visible {
    outline: 2px solid var(--wcad-btn-active-bg);
    outline-offset: -2px;
}

.wcad-qty-input {
    /* stretches to fill remaining space */
    flex:        1 1 auto;
    width:       52px;          /* fallback */
    min-width:   40px;
    height:      100%;
    border:      none;
    border-left: var(--wcad-field-border-width) solid var(--wcad-field-border-color);
    border-right: var(--wcad-field-border-width) solid var(--wcad-field-border-color);
    text-align:  center;
    font-weight: 700;
    background:  var(--wcad-form-bg);
    color:       var(--wcad-field-text);
    font-family: inherit;
    /* readonly so no keyboard on mobile — users tap +/- buttons */
    cursor:      default;
    /* font size: must stay ≥16px to prevent iOS zoom even on focus */
    font-size:   18px;
    /* hide spinners */
    -moz-appearance:    textfield;
    -webkit-appearance: none;
    appearance:         none;
    padding:     0;
    margin:      0;
}
.wcad-qty-input::-webkit-inner-spin-button,
.wcad-qty-input::-webkit-outer-spin-button { display: none; }
.wcad-qty-input:focus { outline: none; }

/* ── Summary ── */
.wcad-summary {
    background:    var(--wcad-summary-bg);
    border:        1px solid var(--wcad-summary-border);
    border-radius: 10px;
    padding:       14px;
    margin:        12px 0;
    color:         var(--wcad-summary-text);
    font-size:     var(--wcad-field-font-size);
}
.wcad-summary-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         3px 0;
}
.wcad-summary-row .dashicons {
    font-size: 15px !important; width: 15px !important; height: 15px !important;
    margin-left: 4px; color: var(--wcad-field-icon-color);
}
.wcad-summary-divider { border-top: 1px solid var(--wcad-summary-border); margin: 8px 0; }
.wcad-summary-total   { font-weight: 700; }
.wcad-summary-total span:last-child { color: var(--wcad-summary-total); }

/* ── Order button ── */
.wcad-order-btn {
    width:           100%;
    padding:         15px 20px;
    background:      var(--wcad-order-bg);
    color:           var(--wcad-order-text);
    border:          none;
    border-radius:   var(--wcad-order-radius);
    font-size:       var(--wcad-order-size);
    font-weight:     700;
    font-family:     inherit;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    margin-top:      6px;
    transition:      opacity .18s, transform .1s;
    touch-action:    manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance:      none;
}
.wcad-order-btn:hover   { opacity: .9; }
.wcad-order-btn:active  { transform: scale(.98); }
.wcad-order-btn:disabled { opacity: .5; cursor: not-allowed; }
.wcad-order-price       { opacity: .85; font-weight: 400; }

/* ── Shake animation (option 2) ── */
@keyframes wcad-shake {
    0%,100% { transform: translateX(0) rotate(0); }
    10%      { transform: translateX(-5px) rotate(-1.5deg); }
    20%      { transform: translateX(5px)  rotate(1.5deg); }
    30%      { transform: translateX(-4px) rotate(-1deg); }
    40%      { transform: translateX(4px)  rotate(1deg); }
    50%      { transform: translateX(-2px); }
    60%      { transform: translateX(2px); }
    70%      { transform: translateX(-1px); }
    80%      { transform: translateX(1px); }
}
/* Class added/removed by JS every 5s */
.wcad-order-btn.wcad-do-shake {
    animation: wcad-shake 0.6s ease;
}

/* ── Loading spinner ── */
.wcad-order-btn.loading {
    pointer-events: none;
    opacity: 0.75;
}
.wcad-order-btn.loading::before {
    content:      '';
    width:        20px;
    height:       20px;
    flex-shrink:  0;
    border:       2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation:    wcad-spin .6s linear infinite;
}
@keyframes wcad-spin { to { transform: rotate(360deg); } }

/* ── Error box ── */
.wcad-error-msg {
    background:    #fff3cd;
    border:        1px solid #ffc107;
    border-radius: 6px;
    padding:       10px 14px;
    margin-bottom: 12px;
    color:         #856404;
    font-size:     13px;
    display:       none;
    text-align:    right;
    direction:     rtl;
}
.wcad-error-msg.visible { display: block; }

/* ── Slide-in animation for commune/type ── */
@keyframes wcad-slidein {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0);    }
}
#wcad-commune-wrap,
#wcad-type-wrap { animation: wcad-slidein .22s ease; }

/* ═══════════════════════════════════════════════════════════════════════
   ICON INSIDE INPUT FIELD (right side in RTL – matches screenshot)
═══════════════════════════════════════════════════════════════════════ */
.wcad-input-icon-wrap {
    position: relative;
    display:  block;
}

/* The icon sits on the right inside the field */
.wcad-input-icon {
    position:    absolute;
    right:       12px;
    top:         50%;
    transform:   translateY(-50%);
    color:       var(--wcad-field-icon-color) !important;
    font-size:   18px !important;
    width:       18px !important;
    height:      18px !important;
    line-height: 1 !important;
    pointer-events: none;
    z-index:     1;
}

/* Input/select gets right padding so text doesn't overlap icon */
.wcad-input--icon,
.wcad-select--icon {
    padding-right: 42px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   VARIATION SWATCHES
═══════════════════════════════════════════════════════════════════════ */
.wcad-swatches-wrap { margin-bottom: 14px; }
.wcad-swatch-group  { margin-bottom: 14px; }

.wcad-swatches {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
    margin-top: 6px;
}

/* ── Base swatch button ── */
.wcad-swatch {
    position:     relative;
    display:      inline-flex;
    align-items:  center;
    justify-content: center;
    border:       2px solid var(--wcad-field-border-color);
    border-radius: 6px;
    background:   var(--wcad-field-bg);
    cursor:       pointer;
    transition:   border-color .15s, box-shadow .15s, transform .1s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    padding:      0;
    outline:      none;
}

.wcad-swatch:hover {
    border-color: var(--wcad-btn-active-bg);
    transform:    scale(1.05);
}

.wcad-swatch--active {
    border-color: var(--wcad-btn-active-bg) !important;
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--wcad-btn-active-bg) 25%, transparent);
}

/* Disabled / out-of-stock */
.wcad-swatch--disabled {
    opacity: 0.4;
    cursor:  not-allowed;
    pointer-events: none;
}

/* ── Color swatch ── */
.wcad-swatch--color {
    width:  38px;
    height: 38px;
    border-radius: 50%;
    overflow: visible;
    padding:  2px;
}

.wcad-swatch-color {
    display:       block;
    width:         100%;
    height:        100%;
    border-radius: 50%;
    border:        1px solid rgba(0,0,0,.08);
}

/* ── Image swatch ── */
.wcad-swatch--image {
    width:  42px;
    height: 42px;
    padding: 2px;
    border-radius: 8px;
    overflow: hidden;
}

.wcad-swatch-img {
    width:         100%;
    height:        100%;
    object-fit:    cover;
    border-radius: 5px;
    display:       block;
}

/* ── Label / button swatch ── */
.wcad-swatch--label {
    padding:     6px 14px;
    font-size:   13px;
    font-weight: 600;
    color:       var(--wcad-field-text);
    font-family: inherit;
    min-width:   40px;
    height:      36px;
    white-space: nowrap;
    border-radius: var(--wcad-field-radius);
}

.wcad-swatch--label.wcad-swatch--active {
    background: var(--wcad-btn-active-bg);
    color:      var(--wcad-btn-active-text);
}

/* ── Tooltip on hover ── */
.wcad-swatch-tooltip {
    position:      absolute;
    bottom:        calc(100% + 7px);
    left:          50%;
    transform:     translateX(-50%);
    background:    rgba(0,0,0,.8);
    color:         #fff;
    font-size:     11px;
    padding:       3px 7px;
    border-radius: 4px;
    white-space:   nowrap;
    pointer-events: none;
    opacity:       0;
    transition:    opacity .15s;
    z-index:       10;
}

.wcad-swatch:hover .wcad-swatch-tooltip { opacity: 1; }

/* Selected value label */
.wcad-swatch-selected {
    font-size:   12px;
    color:       var(--wcad-btn-active-bg);
    font-weight: 600;
    margin-top:  4px;
    min-height:  16px;
}