/*
 * SweetAlert2 theming - same brand-matched confirm dialogs + toasts as the
 * admin side (see layouts/admin.blade.php's docblock for the full
 * rationale). Colors are hardcoded here rather than reading
 * var(--ok-orange-2) etc. because those custom properties are defined per
 * page (in each view's own @push('styles') block, e.g.
 * bookings/quotation.blade.php), not on this shared layout - pages that
 * don't define them would otherwise get an unstyled dialog.
 */
.swal2-popup{font-family:'Poppins',sans-serif !important;border-radius:18px !important}
.swal2-title{font-weight:800 !important;font-size:20px !important;color:#0B0B0C !important}
.swal2-html-container{color:#5c5b57 !important;font-size:14.5px !important}
.ok-swal-confirm{background:linear-gradient(120deg,#7C2D12,#C2410C) !important;color:#fff !important;font-weight:700 !important;font-size:14px !important;padding:11px 24px !important;border-radius:999px !important;box-shadow:none !important}
.ok-swal-cancel{background:#fff !important;color:#0B0B0C !important;font-weight:600 !important;font-size:14px !important;padding:11px 24px !important;border-radius:999px !important;border:1.5px solid rgba(11,11,12,.15) !important;box-shadow:none !important}
.swal2-toast{border-radius:14px !important;border:1px solid rgba(11,11,12,.08) !important;box-shadow:0 8px 24px rgba(11,11,12,.1) !important}
.swal2-toast .swal2-title{font-size:14px !important;font-weight:600 !important}
.swal2-timer-progress-bar{background:linear-gradient(120deg,#C2410C,#FF7A00) !important}
.swal2-actions{gap:12px !important}

/* QA request (Sep 2, 2026): "put also a show password in create account
   and log in page" - a show/hide toggle overlaid on any password field
   wrapped in .ok-password-field (see auth/login.blade.php and
   auth/register.blade.php). Defined here rather than in those pages'
   own CSS files since layouts-marketing.css loads on every page under
   layouts.marketing, and this toggle is meant to be reusable wherever a
   password field shows up under that layout (forgot/reset-password
   included, if those add it later). !important on the input's
   padding-right guards against each page's own .ok-field input rule
   (auth-login.css, auth-register.css, etc.) resetting all four padding
   sides with its own shorthand declaration, which loads after this file. */
.ok-password-field{position:relative}
.ok-password-field input{padding-right:64px !important}
.ok-password-toggle{position:absolute;top:50%;right:6px;transform:translateY(-50%);background:none;border:none;color:#8a887f;font-size:12.5px;font-weight:700;font-family:'Poppins',sans-serif;cursor:pointer;padding:6px 10px;border-radius:8px;line-height:1}
.ok-password-toggle:hover{color:#5c5b57;background:rgba(11,11,12,.05)}
.ok-password-toggle:focus{outline:none;box-shadow:0 0 0 2px rgba(194,65,12,.25)}

/* QA request (Sep 3, 2026): "i want the gcash qr in customer to be
   clickable. like it will zoom so that the customer can scan it
   properly" - any .ok-qr-preview image (GCash/Maya QR codes on
   bookings/survey-fee.blade.php and bookings/quotation.blade.php)
   opens a full-screen zoomed copy on click/tap, so a customer's phone
   camera has more QR detail to focus on than the inline thumbnail
   gives it. Defined here (not each page's own CSS) since both pages
   extend layouts.marketing - see layouts-marketing.js for the handler
   that builds/opens this. */
.ok-qr-preview{cursor:zoom-in}
.ok-qr-lightbox{display:none;position:fixed;inset:0;background:rgba(11,11,12,.85);z-index:999;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.ok-qr-lightbox.is-open{display:flex}
.ok-qr-lightbox img{max-width:min(92vw,480px);max-height:88vh;width:100%;height:auto;border-radius:16px;background:#fff;padding:16px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.ok-qr-lightbox-close{position:absolute;top:20px;right:24px;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ok-qr-lightbox-close:hover{background:rgba(255,255,255,.25)}