/* Form & Dashboard Shared Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

.yr-wrap{all:initial;display:block !important;width:100% !important;max-width:500px !important;margin:0 auto !important;padding:20px !important;box-sizing:border-box !important;font-family:'Inter',sans-serif;font-size:14px;line-height:1.5;color:#333;text-align:left;isolation:isolate}
.yr-wrap *,.yr-wrap *::before,.yr-wrap *::after{box-sizing:border-box}
.yr-card{background:#fff;border-radius:20px;box-shadow:0 8px 40px rgba(0,0,0,.08);overflow:hidden}
.yr-hero{background:linear-gradient(135deg,#2d5016,#4a7c23);padding:36px 40px 28px;color:#fff;text-align:center}
.yr-hero h1{font-size:26px;font-weight:700;margin:0 0 6px;letter-spacing:-.5px;color:#fff}
.yr-hero p{font-size:14px;opacity:.85;margin:0;color:#fff}
.yr-badge{display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);font-weight:600;padding:8px 20px;border-radius:40px;margin-top:16px;font-size:15px;color:#fff}
.yr-body{padding:32px 40px 40px}
.yr-step{display:none}.yr-step.active{display:block}
.yr-step-title{font-size:16px;font-weight:600;color:#1a1a1a;margin-bottom:20px}
.yr-field{margin-bottom:20px}
.yr-field label{display:block;font-weight:500;color:#333;margin-bottom:6px;font-size:13px}
.yr-field input[type=text],.yr-field input[type=tel],.yr-field input[type=email],.yr-field input[type=number],.yr-field textarea{width:100%;padding:13px 16px;border:1.5px solid #e2e2e2;border-radius:10px;font-size:15px;font-family:inherit;background:#fafafa;color:#333;transition:border-color .2s}
.yr-field input:focus,.yr-field textarea:focus{outline:none;border-color:#4a7c23;background:#fff}
.yr-field textarea{resize:vertical;min-height:90px}
.yr-qty{display:flex;align-items:center;gap:14px}
.yr-qty input{width:90px;text-align:center;font-size:18px;font-weight:600}
.yr-qty span{color:#888;font-size:14px}

/* Coupon */
.yr-coupon-row{display:flex;gap:8px}
.yr-coupon-row input{flex:1;text-transform:uppercase}
.yr-btn-sm{padding:10px 18px;background:#1a1a1a;color:#fff;border:none;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer;font-family:inherit}
.yr-btn-sm:hover{background:#333}
.yr-coupon-msg{padding:8px 12px;border-radius:8px;font-size:13px;margin-top:8px}
.yr-coupon-msg.success{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0}
.yr-coupon-msg.error{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}

/* Total */
.yr-total{background:linear-gradient(135deg,#f0fdf4,#ecfdf5);border:1.5px solid #bbf7d0;border-radius:14px;padding:20px;margin:24px 0}
.yr-total .lbl{font-size:12px;color:#16a34a;text-transform:uppercase;letter-spacing:1.5px;font-weight:600;text-align:center;margin-bottom:12px}
.yr-breakdown{display:flex;flex-direction:column;gap:8px}
.yr-line{display:flex;justify-content:space-between;font-size:14px;color:#555}
.yr-line.yr-final{font-size:20px;font-weight:700;color:#15803d;border-top:1px solid #bbf7d0;padding-top:8px;margin-top:4px}
.yr-line.yr-discount{color:#16a34a}

/* Buttons */
.yr-btn{display:block;width:100%;padding:15px;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;text-align:center}
.yr-btn-green{background:#16a34a;color:#fff}.yr-btn-green:hover{background:#15803d}
.yr-btn-dark{background:#1a1a1a;color:#fff;margin-top:16px}.yr-btn-dark:hover{background:#333}
.yr-btn-ghost{background:#f5f5f5;color:#666;margin-top:10px}.yr-btn-ghost:hover{background:#eee}

/* Checkbox */
.yr-check{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px;padding:14px 16px;background:#f8f8f8;border-radius:10px;border:1.5px solid #eee}
.yr-check input[type=checkbox]{width:20px;height:20px;margin-top:1px;accent-color:#16a34a;flex-shrink:0}
.yr-check label{font-size:14px;color:#444;cursor:pointer;line-height:1.5}
.yr-check label b{color:#1a1a1a}

/* Upload */
.yr-upload{position:relative;border:2px dashed #ddd;border-radius:12px;padding:24px;text-align:center;cursor:pointer;transition:border-color .2s}
.yr-upload:hover{border-color:#4a7c23}
.yr-upload input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.yr-upload .ico{font-size:28px;margin-bottom:6px}
.yr-upload .txt{font-size:13px;color:#888}
.yr-upload .txt b{color:#4a7c23}
.yr-upload.done{border-color:#16a34a;background:#f0fdf4}
.yr-note{font-size:12px;color:#999;margin-top:8px}

/* QR Popup */
.yr-popup-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;align-items:center;justify-content:center;padding:20px}
.yr-popup-bg.show{display:flex}
.yr-popup{background:#fff;border-radius:20px;padding:36px;max-width:380px;width:100%;text-align:center;position:relative}
.yr-popup .x{position:absolute;top:14px;right:18px;background:none;border:none;font-size:26px;cursor:pointer;color:#aaa}
.yr-popup .x:hover{color:#333}
.yr-popup h3{font-size:20px;font-weight:700;color:#1a1a1a;margin:0 0 4px}
.yr-popup .sub{font-size:13px;color:#888;margin:0 0 20px}
.yr-qr{background:#f8f8f8;border-radius:14px;padding:20px;display:inline-block;margin-bottom:16px;border:1px solid #eee}
.yr-qr img{display:block;width:220px;height:220px;border-radius:8px}
.yr-popup .pay{font-size:24px;font-weight:700;color:#16a34a;margin-bottom:4px}
.yr-popup .ref{font-size:12px;color:#999;margin-bottom:20px;word-break:break-all}
.yr-popup .yr-btn-green{max-width:280px;margin:0 auto}

/* Success */
.yr-done{display:none;text-align:center;padding:48px 40px}
.yr-done.show{display:block}
.yr-done .chk{width:64px;height:64px;background:#f0fdf4;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 20px;border:2px solid #bbf7d0}
.yr-done h2{font-size:22px;color:#1a1a1a;margin:0 0 8px}
.yr-done p{font-size:14px;color:#888;line-height:1.6;margin:0}

/* Dashboard */
.yr-dashboard{max-width:600px}
.yr-dash-header{display:flex;justify-content:space-between;align-items:center}
.yr-otp-msg{color:#666;font-size:14px;margin-bottom:16px;text-align:center}
.yr-booking-card{border:1px solid #e2e2e2;border-radius:12px;padding:16px;margin-bottom:12px}
.yr-booking-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.yr-booking-amount{font-size:18px;font-weight:700;color:#15803d}
.yr-booking-meta{font-size:12px;color:#888;display:flex;gap:16px}
.yr-booking-meta span{display:inline-block}

@media(max-width:540px){
    .yr-hero{padding:28px 24px 22px}.yr-hero h1{font-size:22px}
    .yr-body{padding:24px 24px 32px}
    .yr-qr img{width:180px;height:180px}
}