/* R16: customer task first, order summary after the task on mobile. */
@media (max-width: 980px) {
  .co-layout {display:flex!important;flex-direction:column!important;align-items:stretch!important}
  .co-layout > .co-flow {order:0!important;width:100%!important;min-width:0}
  .co-layout > .co-aside {order:1!important;width:100%!important;min-width:0;position:static!important}
  .co-aside .co-summary {position:static!important;max-height:none!important}
}
.co-card-head .co-step{display:none!important}
.co-card{scroll-margin-top:18px}
/* Real OTP input overlays decorative digits: keep opacity 1 and fully focusable for iOS QuickType.
   Do not use display:none, opacity:0, clip-path, or pointer-events:none on the native input. */
.pallina-otp-six{position:relative;isolation:isolate}
#customerAuthOtp #customerOtp.pallina-otp-native{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  display:block!important;margin:0!important;padding:0!important;border:0!important;
  box-sizing:border-box!important;border-radius:12px!important;
  background:transparent!important;opacity:1!important;visibility:visible!important;
  clip-path:none!important;pointer-events:auto!important;overflow:visible!important;
  color:transparent!important;-webkit-text-fill-color:transparent!important;
  caret-color:transparent!important;box-shadow:none!important;outline:none!important;
  font-size:18px!important;letter-spacing:normal!important;z-index:2!important;
}
#customerAuthOtp #customerOtp.pallina-otp-native::selection{background:transparent;color:transparent}
#customerAuthOtp #customerOtpVerify{display:none!important}
.pallina-otp-six{position:relative;width:100%;margin:12px 0 15px;min-height:clamp(48px,12vw,70px)}
.pallina-otp-cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(5px,1.6vw,12px);width:100%;pointer-events:none}
.pallina-otp-cells .pallina-otp-cell{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;
 height:clamp(48px,12vw,70px);padding:0!important;border:1.7px solid #d9d0d0;border-radius:12px;
 background:#fff;box-shadow:none;text-align:center;direction:ltr;font-size:clamp(19px,5vw,26px);
 font-weight:750;font-variant-numeric:tabular-nums;color:#382d2b;outline:none;
 transition:border-color .14s,box-shadow .14s,background .14s}
/* R46.4: a visible caret belongs to the next empty visual slot, not to the full-width native input.
   The native caret stays hidden because its horizontal position does not match the six boxes. */
.pallina-otp-cells .pallina-otp-cell{position:relative}
.pallina-otp-six:focus-within .pallina-otp-cell.is-active{
 border-color:#c86686;box-shadow:0 0 0 3px rgba(200,102,134,.22);background:#fffafd;
}
.pallina-otp-six:focus-within .pallina-otp-cell.is-active::after{
 content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
 width:2px;height:42%;min-height:17px;max-height:28px;border-radius:2px;
 background:#be587b;pointer-events:none;animation:pallina-otp-caret-blink 1s steps(1,end) infinite;
}
@keyframes pallina-otp-caret-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
 .pallina-otp-six:focus-within .pallina-otp-cell.is-active::after{animation:none}
}
.pallina-otp-six.is-checking .pallina-otp-cell{border-color:#d8ad70;background:#fffaf2}
.pallina-otp-six.is-valid .pallina-otp-cell{border-color:#42a16c;background:#effbf3;box-shadow:0 0 0 1px #42a16c}
.pallina-otp-six.is-invalid .pallina-otp-cell{border-color:#d64d56;background:#fff2f2;box-shadow:0 0 0 1px #d64d56}
.pallina-otp-six.is-invalid:focus-within .pallina-otp-cell.is-active{border-color:#d64d56;background:#fff2f2;box-shadow:0 0 0 2px rgba(214,77,86,.24)}
.pallina-otp-six.is-invalid:focus-within .pallina-otp-cell.is-active::after{background:#d64d56}
#customerAuthOtp .co-otp-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#customerAuthOtp #customerOtpCountdown{font-variant-numeric:tabular-nums}
@media(max-width:420px){.pallina-otp-six{gap:5px}.pallina-otp-cells .pallina-otp-cell{border-radius:9px}}

/* R16.1: iOS native select intrinsic sizing + long saved addresses must never expand checkout cards. */
@media (max-width:980px){
  html,body{max-width:100%;overflow-x:clip}
  .co-main,.co-layout,.co-layout>.co-flow,.co-layout>.co-aside,
  .co-flow>.co-card,.co-choice-grid,.co-person-grid,
  #coSavedAddresses,.co-field{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
  .co-flow>.co-card{width:100%!important}
  #coSavedSelect{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
}
#coSavedSelect{max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.co-saved-address-preview{margin:9px 2px 0;font-size:.88rem;line-height:1.75;color:#766663;overflow-wrap:anywhere;word-break:normal;white-space:normal;max-width:100%}
.co-saved-address-preview[hidden]{display:none!important}

/* R17 - Neshan maps search and airy pastel framing */
.pallina-neshan-search{position:relative;margin:10px 0 8px;z-index:450;direction:rtl;min-width:0}
.pallina-neshan-search input{display:block;width:100%;min-width:0;box-sizing:border-box;border:1px solid #ead9d9;border-radius:15px;background:#fff url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23b37990" stroke-width="2"%3E%3Ccircle cx="11" cy="11" r="8"/%3E%3Cpath d="m21 21-4.3-4.3"/%3E%3C/svg%3E') no-repeat 14px center;box-shadow:0 3px 14px rgba(92,51,69,.04);padding:13px 14px 13px 42px;color:#463535;font:inherit;font-size:14px;outline:none}
.pallina-neshan-search input:focus{border-color:#c68ba1;box-shadow:0 0 0 3px rgba(199,135,157,.15)}
.pallina-neshan-results{position:absolute;z-index:500;top:calc(100% + 3px);right:0;left:0;max-height:218px;overflow:auto;background:#fff;border:1px solid #eadce0;border-radius:12px;box-shadow:0 14px 30px rgba(70,40,45,.12)}
.pallina-neshan-results[hidden]{display:none!important}
.pallina-neshan-results button{width:100%;display:block;text-align:right;padding:11px 13px;background:#fff;border:0;border-bottom:1px solid #f6eff1;font:inherit;font-size:13px;cursor:pointer;white-space:normal;color:#463535}
.pallina-neshan-results button:hover{background:#fff4f7}
.co-map,.delivery-customer-map{border-radius:18px!important;border:1px solid #f1e4e2;box-shadow:0 6px 22px rgba(81,48,59,.08)}

/* R18: keep OTP squares equally sized on desktop too, not full-width stretched fields. */
.pallina-otp-six{max-width:440px;margin-inline:auto}
@media(min-width:700px){
 .pallina-otp-cells{gap:9px}
 .pallina-otp-cells .pallina-otp-cell{height:64px;min-height:64px;font-size:25px}
}