/* ═══════════════════════════════════════════════════════════
   Окжетпес Брондау Плагині — стильдер
   Palette: #1a5c3a (dark green) · #c8a84b (gold) · #f5f0e8 (cream)
═══════════════════════════════════════════════════════════ */
:root{
  --okz-green:#1a5c3a;
  --okz-green-dark:#134530;
  --okz-gold:#c8a84b;
  --okz-gold-light:#e8d27a;
  --okz-cream:#f5f0e8;
  --okz-cream-dark:#ede6d5;
  --okz-text:#1e1e1e;
  --okz-muted:#666;
  --okz-radius:12px;
  --okz-shadow:0 4px 24px rgba(0,0,0,.10);
  --okz-transition:.24s ease;
}

/* ── Wrap ───────────────────────────────────────────────── */
.okz-wrap{font-family:'Segoe UI',system-ui,sans-serif;color:var(--okz-text);max-width:1180px;margin:0 auto;padding:0 16px}

/* ══════════════════════════
   GALLERY
══════════════════════════ */
.okz-gallery{margin-bottom:32px}
.okz-gallery__main{position:relative;border-radius:var(--okz-radius);overflow:hidden;background:#000;aspect-ratio:16/9;max-height:480px}
.okz-gallery__main-img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.okz-gallery__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);color:#fff;border:none;font-size:2.2rem;width:48px;height:64px;cursor:pointer;border-radius:4px;transition:background var(--okz-transition);z-index:2}
.okz-gallery__nav:hover{background:rgba(0,0,0,.75)}
.okz-gallery__nav--prev{left:10px}
.okz-gallery__nav--next{right:10px}
.okz-gallery__counter{position:absolute;bottom:14px;right:16px;background:rgba(0,0,0,.5);color:#fff;font-size:.82rem;padding:3px 10px;border-radius:20px}
.okz-gallery__thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.okz-thumb{width:calc(16.666% - 8px);aspect-ratio:4/3;object-fit:cover;border-radius:8px;cursor:pointer;opacity:.65;transition:opacity var(--okz-transition),transform var(--okz-transition),box-shadow var(--okz-transition);border:2px solid transparent}
.okz-thumb:hover{opacity:1;transform:scale(1.04)}
.okz-thumb--active{opacity:1;border-color:var(--okz-gold);box-shadow:0 0 0 2px var(--okz-gold)}

/* ── Lightbox ───────────────────────────────────────────── */
.okz-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}
.okz-lightbox__overlay{position:absolute;inset:0;background:rgba(0,0,0,.92);cursor:pointer}
.okz-lightbox__inner{position:relative;z-index:1;max-width:90vw;max-height:90vh;display:flex;align-items:center}
.okz-lightbox__img{max-width:85vw;max-height:88vh;border-radius:8px;object-fit:contain}
.okz-lightbox__close{position:absolute;top:-40px;right:-8px;background:none;border:none;color:#fff;font-size:2.2rem;cursor:pointer;line-height:1}
.okz-lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.18);border:none;color:#fff;font-size:2.5rem;width:52px;height:72px;cursor:pointer;border-radius:6px;transition:background .2s}
.okz-lightbox__nav:hover{background:rgba(255,255,255,.35)}
.okz-lightbox__nav--prev{left:-60px}
.okz-lightbox__nav--next{right:-60px}

/* ══════════════════════════
   LAYOUT
══════════════════════════ */
.okz-layout{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:start}
@media(max-width:900px){.okz-layout{grid-template-columns:1fr}}

/* ── Price badge ────────────────────────────────────────── */
.okz-price-badge{background:var(--okz-green);color:#fff;border-radius:var(--okz-radius);padding:18px 24px;display:flex;align-items:baseline;gap:8px;margin-bottom:20px}
.okz-price-badge__from{font-size:.82rem;opacity:.8}
.okz-price-badge__amount{font-size:2rem;font-weight:700;letter-spacing:-.5px}
.okz-price-badge__per{font-size:.82rem;opacity:.8}

/* ── Specs ──────────────────────────────────────────────── */
.okz-room-specs{display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.okz-spec{display:flex;align-items:center;gap:6px;background:var(--okz-cream);border-radius:8px;padding:8px 14px;font-size:.9rem;font-weight:500}
.okz-spec svg{opacity:.7}

/* ── Amenities ──────────────────────────────────────────── */
.okz-amenities__title{font-size:1rem;font-weight:700;margin:0 0 10px;color:var(--okz-green)}
.okz-amenities__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.okz-amenities__list li{font-size:.88rem;padding:4px 0;border-bottom:1px solid var(--okz-cream-dark);display:flex;align-items:center;gap:6px}
.okz-amenities__list li::before{content:'✓';color:var(--okz-gold);font-weight:700;flex-shrink:0}

/* ══════════════════════════
   BOOKING CARD
══════════════════════════ */
.okz-booking-card{background:#fff;border-radius:var(--okz-radius);box-shadow:var(--okz-shadow);padding:28px;border-top:4px solid var(--okz-gold);position:sticky;top:20px}
.okz-booking-card__title{font-size:1.25rem;font-weight:700;margin:0 0 20px;color:var(--okz-green)}

/* ── Form ───────────────────────────────────────────────── */
.okz-form{display:flex;flex-direction:column;gap:14px}
.okz-form__row--2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.okz-label{display:flex;flex-direction:column;gap:5px;font-size:.85rem;font-weight:600;color:var(--okz-text)}
.okz-input{border:1px solid #ddd;border-radius:8px;padding:10px 13px;font-size:.95rem;transition:border-color var(--okz-transition),box-shadow var(--okz-transition);width:100%;box-sizing:border-box;font-family:inherit}
.okz-input:focus{outline:none;border-color:var(--okz-green);box-shadow:0 0 0 3px rgba(26,92,58,.12)}

/* price preview */
.okz-price-preview{background:var(--okz-cream);border-radius:8px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center}
.okz-price-preview__label{font-size:.85rem;color:var(--okz-muted)}
.okz-price-preview__amount{font-size:1.3rem;font-weight:700;color:var(--okz-green)}

/* ── Payment options ────────────────────────────────────── */
.okz-payment-group{border:none;padding:0;margin:0}
.okz-payment-group legend{font-size:.85rem;font-weight:600;margin-bottom:10px}
.okz-payment-options{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.okz-pay-opt{cursor:pointer}
.okz-pay-opt input{display:none}
.okz-pay-opt__box{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border:2px solid #e0e0e0;border-radius:10px;transition:border-color var(--okz-transition),background var(--okz-transition);text-align:center}
.okz-pay-opt__icon{font-size:1.4rem;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.okz-pay-opt__icon--kaspi{background:#ef3f23;color:#fff;font-weight:900;font-size:1rem}
.okz-pay-opt__icon--card{background:#1a5c3a;color:#fff;font-size:1rem}
.okz-pay-opt__icon--cash{background:#c8a84b;color:#fff;font-weight:900;font-size:1rem}
.okz-pay-opt__name{font-size:.78rem;font-weight:700}
.okz-pay-opt__sub{font-size:.68rem;color:var(--okz-muted);line-height:1.3}
.okz-pay-opt input:checked + .okz-pay-opt__box{border-color:var(--okz-green);background:rgba(26,92,58,.06)}

/* ── Submit button ──────────────────────────────────────── */
.okz-btn-submit{background:linear-gradient(135deg,var(--okz-green),var(--okz-green-dark));color:#fff;border:none;border-radius:10px;padding:14px;font-size:1rem;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s;letter-spacing:.3px;position:relative;overflow:hidden}
.okz-btn-submit::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.08));pointer-events:none}
.okz-btn-submit:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(26,92,58,.3)}
.okz-btn-submit:active{transform:translateY(0)}

/* ══════════════════════════
   SUCCESS STATE
══════════════════════════ */
.okz-success{text-align:center;padding:12px 0}
.okz-success__icon{font-size:3rem;background:var(--okz-green);color:#fff;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-weight:700}
.okz-success__title{font-size:1.15rem;font-weight:700;color:var(--okz-green);margin:0 0 8px}
.okz-success__body{color:var(--okz-muted);font-size:.9rem;margin:0 0 16px}

/* payment instructions */
.okz-pay-instructions{background:var(--okz-cream);border-radius:10px;padding:16px;margin-top:12px;text-align:left}
.okz-kaspi-badge{background:#ef3f23;color:#fff;border-radius:6px;display:inline-block;padding:4px 14px;font-weight:700;font-size:1rem;margin-bottom:10px}
.okz-btn-kaspi{display:block;background:#ef3f23;color:#fff;border-radius:8px;padding:12px;text-align:center;text-decoration:none;font-weight:700;font-size:1rem;margin:10px 0;transition:opacity .2s}
.okz-btn-kaspi:hover{opacity:.85}
.okz-kaspi-note{font-size:.82rem;color:var(--okz-muted);text-align:center}
.okz-bank-table{width:100%;border-collapse:collapse;font-size:.88rem}
.okz-bank-table th,.okz-bank-table td{padding:7px 10px;border-bottom:1px solid var(--okz-cream-dark);text-align:left}
.okz-bank-table th{color:var(--okz-muted);font-weight:600;width:90px}
.okz-bank-table code{background:#fff;border-radius:4px;padding:2px 6px;font-size:.85rem}
.okz-card-note,.okz-cash-note{font-size:.84rem;color:var(--okz-muted);margin:10px 0 0}
.okz-btn-call{display:inline-block;background:var(--okz-green);color:#fff;border-radius:8px;padding:10px 22px;text-decoration:none;font-weight:700;margin-top:10px}

/* ══════════════════════════
   ROOMS LIST GRID
══════════════════════════ */
.okz-rooms-grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:24px;padding:16px 0}
@media(max-width:800px){.okz-rooms-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.okz-rooms-grid{grid-template-columns:1fr}}

.okz-room-card{display:block;border-radius:var(--okz-radius);overflow:hidden;background:#fff;box-shadow:var(--okz-shadow);text-decoration:none;color:inherit;transition:transform var(--okz-transition),box-shadow var(--okz-transition)}
.okz-room-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.13)}
.okz-room-card__img-wrap{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--okz-cream)}
.okz-room-card__img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.okz-room-card:hover .okz-room-card__img-wrap img{transform:scale(1.05)}
.okz-room-card__no-img{font-size:3rem;display:flex;align-items:center;justify-content:center;height:100%;color:var(--okz-muted)}
.okz-room-card__price{position:absolute;bottom:10px;right:10px;background:var(--okz-green);color:#fff;font-size:.8rem;font-weight:700;padding:4px 10px;border-radius:6px}
.okz-room-card__body{padding:16px}
.okz-room-card__title{font-size:1.05rem;font-weight:700;margin:0 0 6px;color:var(--okz-green)}
.okz-room-card__excerpt{font-size:.84rem;color:var(--okz-muted);margin:0 0 10px;line-height:1.5}
.okz-room-card__specs{display:flex;gap:10px;font-size:.8rem;color:var(--okz-muted);margin-bottom:12px}
.okz-room-card__btn{display:inline-block;background:var(--okz-gold);color:#fff;border-radius:6px;padding:6px 16px;font-size:.82rem;font-weight:700;text-decoration:none}

/* ══════════════════════════
   ADMIN TABLE
══════════════════════════ */
.okz-meta-grid input{padding:6px 8px}

/* ══════════════════════════
   KASPI АУДАРЫМ ҚАДАМДАРЫ
══════════════════════════ */
.okz-transfer-steps{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.okz-step{display:flex;align-items:flex-start;gap:12px}
.okz-step__num{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--okz-green);color:#fff;font-weight:700;font-size:.88rem;display:flex;align-items:center;justify-content:center}
.okz-step__body{font-size:.88rem;line-height:1.5}
.okz-step__body strong{display:block;margin-bottom:2px}
.okz-phone-code,.okz-amount-code,.okz-comment-code{background:#fff;border:1px solid #ddd;border-radius:4px;padding:3px 8px;font-size:.88rem;font-family:monospace;display:inline-block;margin-right:6px}
.okz-copy-btn{background:var(--okz-green);color:#fff;border:none;border-radius:4px;padding:3px 10px;font-size:.78rem;cursor:pointer;transition:opacity .2s}
.okz-copy-btn:hover{opacity:.8}

/* ══════════════════════════
   KASPI QR БЛОК
══════════════════════════ */
.okz-pay-block{background:var(--okz-cream);border-radius:12px;padding:20px;margin-top:14px;text-align:center}

.okz-kaspi-header{margin-bottom:14px}
.okz-kaspi-logo{display:flex;align-items:center;justify-content:center;gap:10px;font-size:1.05rem;font-weight:700;color:#ef3f23}

/* QR аймақ */
.okz-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.okz-qr-instruction{font-size:.88rem;color:var(--okz-muted);margin:0}
.okz-qr-canvas-wrap{position:relative;display:inline-block;padding:12px;background:#fff;border-radius:12px;box-shadow:0 2px 16px rgba(0,0,0,.12)}
.okz-qr-box{line-height:0}
.okz-qr-box img,.okz-qr-box canvas{border-radius:4px;display:block}
/* Kaspi логосы QR ортасында */
.okz-qr-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:50%;padding:3px;box-shadow:0 0 0 2px #fff;pointer-events:none}
.okz-qr-amount-badge{background:#ef3f23;color:#fff;font-size:1.1rem;font-weight:700;border-radius:8px;padding:8px 20px;margin-top:4px}

/* Қадамдар */
.okz-kaspi-steps{display:flex;flex-direction:column;gap:8px;margin:14px 0;text-align:left}
.okz-kstep{display:flex;align-items:center;gap:10px;font-size:.85rem}
.okz-kstep__n{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:#ef3f23;color:#fff;font-weight:700;font-size:.78rem;display:flex;align-items:center;justify-content:center}

/* Баламалы: нөмір */
.okz-kaspi-alt{font-size:.82rem;color:var(--okz-muted);border-top:1px solid var(--okz-cream-dark);padding-top:10px;margin-top:4px}
.okz-kaspi-phone-link{display:inline-block;font-weight:700;color:#ef3f23;font-size:1rem;text-decoration:none;margin-top:4px}
.okz-kaspi-phone-link:hover{text-decoration:underline}