/* ============================================================
   Умный Магазин — Оформление заказа (checkout). Дополняет styles.css.
   ============================================================ */
.co-head{padding:22px 0 6px;}
.co-head h1{margin:0;font-size:30px;font-weight:850;letter-spacing:-.6px;}
.co-head .crumbs{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--faint);margin-bottom:12px;}
.co-head .crumbs a{color:var(--muted);}

.co-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:26px;align-items:start;padding:14px 0 50px;}
.co-col{display:flex;flex-direction:column;gap:20px;min-width:0;}

.co-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 26px;}
.co-card .ct{display:flex;align-items:center;gap:11px;font-size:18px;font-weight:800;letter-spacing:-.3px;margin-bottom:20px;}
.co-card .ct svg{width:21px;height:21px;color:var(--accent);}

/* ---- Ваш заказ ---- */
.co-item{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-2);}
.co-item:first-of-type{padding-top:0;}
.co-item:last-of-type{border-bottom:0;padding-bottom:0;}
.co-item .ci-ph{width:64px;height:64px;border-radius:11px;background:var(--bg-2);color:var(--faint);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.co-item .ci-ph svg{width:30px;height:30px;}
.co-item .ci-brand{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);}
.co-item .ci-name{font-size:14.5px;font-weight:650;margin-top:3px;line-height:1.35;}
.co-item .ci-right{margin-left:auto;display:flex;align-items:center;gap:18px;}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:9px;overflow:hidden;}
.qty button{width:34px;height:38px;border:0;background:var(--panel);color:var(--ink);font-size:17px;font-weight:600;cursor:pointer;}
.qty button:hover{background:var(--bg-2);color:var(--accent);}
.qty .v{width:38px;text-align:center;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;}
.co-item .ci-price{font-size:16px;font-weight:800;white-space:nowrap;min-width:96px;text-align:right;}

/* ---- Формы ---- */
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field.full{grid-column:1/-1;}
.field label{font-size:12.5px;font-weight:650;color:var(--ink-2);}
.field label .req{color:var(--accent);}
.field input,.field textarea{height:50px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--ink);padding:0 15px;font-size:14.5px;font-family:inherit;outline:0;transition:border-color var(--dur-fast);}
.field textarea{height:auto;min-height:84px;padding:13px 15px;resize:vertical;line-height:1.5;}
.field input:focus,.field textarea:focus{border-color:var(--accent);}
.field input::placeholder,.field textarea::placeholder{color:var(--faint);}

/* телефон с кодом страны */
.phone-wrap{display:flex;gap:10px;}
.phone-cc{display:inline-flex;align-items:center;gap:7px;height:50px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--panel);padding:0 13px;font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap;}
.phone-cc .flag{width:22px;height:15px;border-radius:3px;overflow:hidden;display:inline-flex;flex-direction:column;}
.phone-cc .flag i{flex:1;} .phone-cc .flag .w{background:#fff;} .phone-cc .flag .b{background:#0039a6;} .phone-cc .flag .r{background:#d52b1e;}
.phone-cc svg{width:13px;height:13px;color:var(--faint);}
.phone-wrap input{flex:1;}

/* адрес с подсказками (DaData-стиль) */
.addr-wrap{position:relative;}
.addr-input{position:relative;}
.addr-input input{width:100%;padding-right:46px;}
.addr-input .dadata{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:7px;background:var(--ok-soft);color:var(--ok);display:flex;align-items:center;justify-content:center;}
.addr-input .dadata svg{width:15px;height:15px;}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lg);z-index:30;max-height:288px;overflow-y:auto;padding:6px;display:none;}
.suggest.open{display:block;}
.suggest-item{padding:11px 14px;border-radius:9px;cursor:pointer;transition:background var(--dur-fast);}
.suggest-item:hover,.suggest-item.hl{background:var(--bg-2);}
.suggest-item .si-main{font-size:14.5px;color:var(--ink);}
.suggest-item .si-main b{font-weight:700;color:var(--accent);}
.suggest-item .si-sub{font-size:12.5px;color:var(--faint);margin-top:2px;}

/* подтверждение адреса */
.addr-ok{display:none;align-items:flex-start;gap:10px;background:var(--ok-soft);border:1px solid color-mix(in srgb,var(--ok) 22%,transparent);border-radius:var(--r-sm);padding:13px 15px;margin-top:14px;}
.addr-ok.show{display:flex;}
.addr-ok svg{width:18px;height:18px;color:var(--ok);flex-shrink:0;margin-top:1px;}
.addr-ok .ao-t{font-size:13.5px;font-weight:700;color:var(--ok);}
.addr-ok .ao-s{font-size:12.5px;color:var(--muted);margin-top:2px;}
.notes-field{margin-top:16px;}

/* ---- Способ доставки ---- */
.opt{display:flex;align-items:center;gap:14px;border:1.5px solid var(--line);border-radius:var(--r-md);padding:15px 17px;cursor:pointer;transition:all var(--dur-fast);margin-bottom:11px;}
.opt:last-child{margin-bottom:0;}
.opt:hover{border-color:var(--faint);}
.opt.sel{border-color:var(--accent);background:var(--accent-soft);}
.opt .radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;position:relative;transition:border-color var(--dur-fast);}
.opt.sel .radio{border-color:var(--accent);}
.opt.sel .radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent);}
.opt .o-ic{width:24px;height:24px;color:var(--ink-2);flex-shrink:0;}
.opt .o-ic svg{width:24px;height:24px;}
.opt .o-main{min-width:0;}
.opt .o-t{font-size:14.5px;font-weight:700;}
.opt .o-d{font-size:12.5px;color:var(--muted);margin-top:2px;}
.opt .o-price{margin-left:auto;font-size:15px;font-weight:800;white-space:nowrap;}
.opt .o-price.free{color:var(--ok);}

/* ---- Пункт выдачи CDEK ---- */
.pvz{display:none;margin-top:18px;padding-top:18px;border-top:1px solid var(--line-2);}
.pvz.show{display:block;}
.pvz h4{margin:0 0 13px;font-size:15px;font-weight:800;}
.pvz .field{margin-bottom:14px;}
.ya-map{position:relative;height:230px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);
  background:
    linear-gradient(135deg,transparent 46%,#cfe0c7 46%,#cfe0c7 54%,transparent 54%),
    linear-gradient(90deg,#e9ede4,#eef1ea);}
.ya-map .river{position:absolute;top:-10%;right:18%;width:42px;height:130%;background:#a9cbe6;transform:rotate(18deg);filter:blur(.5px);opacity:.85;}
.ya-map .road{position:absolute;background:#fff;opacity:.7;}
.ya-map .r1{top:40%;left:0;right:0;height:3px;transform:rotate(-8deg);}
.ya-map .r2{top:0;bottom:0;left:38%;width:3px;transform:rotate(6deg);}
.ya-map .r3{top:20%;left:10%;width:46%;height:2px;transform:rotate(20deg);}
.ya-map .pin{position:absolute;width:18px;height:18px;border-radius:50% 50% 50% 0;background:var(--accent);border:2px solid #fff;transform:rotate(-45deg);box-shadow:0 2px 5px rgba(0,0,0,.3);cursor:pointer;transition:transform var(--dur-fast);}
.ya-map .pin:hover,.ya-map .pin.act{transform:rotate(-45deg) scale(1.25);z-index:5;}
.ya-map .pin.me{background:#1b6ef5;width:14px;height:14px;border-radius:50%;transform:none;}
.ya-map .pin.me:hover{transform:scale(1.1);}
.ya-map .ya-cred{position:absolute;right:8px;bottom:6px;font-size:11px;color:#6a6f6a;background:rgba(255,255,255,.75);padding:2px 7px;border-radius:5px;font-weight:600;}
.ya-map .ya-zoom{position:absolute;left:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px;}
.ya-map .ya-zoom button{width:30px;height:30px;border:0;background:#fff;color:var(--ink);font-size:18px;font-weight:600;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.ya-map .ya-zoom button:first-child{border-radius:7px 7px 0 0;} .ya-map .ya-zoom button:last-child{border-radius:0 0 7px 7px;}
.pvz .map-hint{font-size:12px;color:var(--faint);margin:9px 0 14px;}

.pvz .pp-count{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:11px;}
.pp{border:1.5px solid var(--line);border-radius:var(--r-md);padding:13px 15px;margin-bottom:11px;transition:border-color var(--dur-fast);}
.pp.sel{border-color:var(--accent);}
.pp .pp-code{font-size:14px;font-weight:750;}
.pp .pp-addr{font-size:12.5px;color:var(--muted);margin-top:3px;}
.pp .pp-addr .dist{color:var(--accent);font-weight:600;}
.pp .pp-btn{width:100%;margin-top:11px;height:42px;border:0;border-radius:var(--r-sm);background:var(--accent);color:#fff;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;}
.pp .pp-btn:hover{background:var(--accent-hover);}
.pp.sel .pp-btn{background:var(--ok);}
.pvz .map-open{width:100%;height:46px;border:1.5px solid var(--accent);border-radius:var(--r-sm);background:var(--panel);color:var(--accent);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;margin-top:4px;}
.pvz .map-open:hover{background:var(--accent-soft);}
.pvz-ok{display:none;align-items:center;gap:10px;background:var(--ok-soft);border:1px solid color-mix(in srgb,var(--ok) 22%,transparent);border-radius:var(--r-sm);padding:13px 15px;margin-top:12px;}
.pvz-ok.show{display:flex;}
.pvz-ok .pk-t{font-size:13.5px;font-weight:700;color:var(--ok);}
.pvz-ok .pk-x{margin-left:auto;color:var(--muted);cursor:pointer;background:none;border:0;display:flex;}
.pvz-ok .pk-x svg{width:16px;height:16px;}

/* ---- Сумма ---- */
.sum-promo{display:flex;gap:10px;margin-bottom:18px;}
.sum-promo input{flex:1;height:46px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--ink);padding:0 14px 0 38px;font-size:14px;font-family:inherit;outline:0;
  background-image: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='%239aa1ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7v5l9 9 8-8-9-9H6a3 3 0 0 0-3 3Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:13px center;}
.sum-promo input:focus{border-color:var(--accent);}
.sum-promo button{height:46px;padding:0 18px;border:0;border-radius:var(--r-sm);background:#15171c;color:#fff;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;}
[data-theme="dark"] .sum-promo button{background:#fff;color:#0e1116;}
.sum-row{display:flex;justify-content:space-between;align-items:center;font-size:14.5px;padding:9px 0;color:var(--ink-2);}
.sum-row .v{font-weight:650;font-variant-numeric:tabular-nums;}
.sum-row.disc .v{color:var(--ok);}
.sum-total{display:flex;justify-content:space-between;align-items:center;padding:16px 0 4px;margin-top:8px;border-top:1px solid var(--line);}
.sum-total .l{font-size:16px;font-weight:750;}
.sum-total .v{font-size:24px;font-weight:850;color:var(--accent);letter-spacing:-.5px;}
.co-consent{display:flex;align-items:flex-start;gap:11px;margin-top:18px;cursor:pointer;font-size:13px;line-height:1.45;color:var(--ink-2);}
.co-consent input{position:absolute;opacity:0;width:0;height:0;}
.co-consent .cc-box{flex:0 0 auto;width:20px;height:20px;margin-top:1px;border:1.5px solid var(--line);border-radius:6px;background:var(--panel);display:flex;align-items:center;justify-content:center;transition:border-color var(--dur-fast),background var(--dur-fast);}
.co-consent .cc-box::after{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) scale(0);transform-origin:center;transition:transform var(--dur-fast);margin-top:-2px;}
.co-consent input:checked + .cc-box{background:var(--accent);border-color:var(--accent);}
.co-consent input:checked + .cc-box::after{transform:rotate(-45deg) scale(1);}
.co-consent input:focus-visible + .cc-box{outline:2px solid var(--accent);outline-offset:2px;}
.co-consent .cc-txt a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.co-consent .cc-txt a:hover{color:var(--accent-hover);}
.co-submit{width:100%;height:54px;border:0;border-radius:var(--r-md);background:var(--accent);color:#fff;font-family:inherit;font-size:16px;font-weight:750;cursor:pointer;margin-top:18px;transition:background var(--dur-fast);}
.co-submit:hover{background:var(--accent-hover);}
.co-submit:disabled{opacity:.55;cursor:not-allowed;}
.co-secure{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--faint);margin-top:13px;}
.co-secure svg{width:15px;height:15px;color:var(--ok);}

/* ---- Модалка карты ---- */
.map-modal-scrim{position:fixed;inset:0;background:rgba(10,12,16,.6);backdrop-filter:blur(3px);z-index:120;display:none;align-items:center;justify-content:center;padding:24px;}
.map-modal-scrim.open{display:flex;}
.map-modal{background:var(--panel);border-radius:var(--r-lg);width:min(960px,100%);max-height:90vh;overflow:hidden;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;}
.map-modal .mm-head{display:flex;align-items:flex-start;gap:14px;padding:20px 24px;border-bottom:1px solid var(--line);}
.map-modal .mm-head h3{margin:0;font-size:18px;}
.map-modal .mm-head .mm-sub{font-size:12.5px;color:var(--faint);margin-top:3px;}
.map-modal .mm-head .mm-x{margin-left:auto;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.map-modal .mm-head .mm-x:hover{color:var(--accent);border-color:var(--accent);}
.map-modal .mm-head .mm-x svg{width:18px;height:18px;}
.map-modal .ya-map{height:440px;border-radius:0;border:0;border-bottom:1px solid var(--line);}
.map-modal .mm-foot{padding:14px 24px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:10px;}
.map-modal .mm-foot .pickbtn{margin-left:auto;height:42px;padding:0 20px;border:0;border-radius:var(--r-sm);background:var(--accent);color:#fff;font-family:inherit;font-weight:700;font-size:13.5px;cursor:pointer;opacity:.5;pointer-events:none;}
.map-modal .mm-foot .pickbtn.on{opacity:1;pointer-events:auto;}

@media (max-width:1023px){
  .co-grid{grid-template-columns:1fr;}
}
@media (max-width:767px){
  .f-grid{grid-template-columns:1fr;}
  .co-card{padding:20px 18px;}
  .co-head h1{font-size:24px;}
  .co-item .ci-right{flex-direction:column;align-items:flex-end;gap:8px;}
}