/* Reservation campaign styles - scoped to .tonie-reserve so it is safe to load globally.
   Served at /Plugins/Misc.Reservation/Content/reservation.css */

.tonie-reserve{--tr-yellow:#ffcb05;--tr-yellow-d:#e6b500;--tr-blue:#2a75bb;--tr-blue-d:#1b5793;--tr-red:#e3350d;--tr-ink:#202637;--tr-muted:#5b6577;--tr-line:#e6e9f0;--tr-card:#fff;--tr-radius:16px;--tr-shadow:0 10px 30px rgba(20,40,80,.08);max-width:960px;margin:0 auto;padding:0 4px;color:var(--tr-ink);line-height:1.55}
.tonie-reserve *{box-sizing:border-box}
.tonie-reserve img{max-width:100%;height:auto}
.tonie-reserve h1,.tonie-reserve h2,.tonie-reserve h3{color:inherit}

/* Alerts (toggled by .is-visible, not the hidden attribute) */
.tonie-reserve .tr-alert{display:none;gap:12px;align-items:flex-start;border-radius:14px;padding:16px 18px;margin:0 0 18px;font-weight:600}
.tonie-reserve .tr-alert.is-visible{display:flex}
.tonie-reserve .tr-alert--success{background:#e9f9ef;border:1px solid #bfe9cd;color:#1c7a43}
.tonie-reserve .tr-alert--error{background:#fdecea;border:1px solid #f5c6c2;color:#b3261e}
.tonie-reserve .tr-alert-ico{font-size:22px;line-height:1;flex:0 0 auto}

/* After a successful reservation: hide everything except the confirmation message */
.tonie-reserve.is-reserved > *{display:none}
.tonie-reserve.is-reserved > .tr-alert--success{display:flex}

/* Hero */
.tonie-reserve .tr-hero{position:relative;overflow:hidden;border-radius:24px;text-align:center;padding:34px 22px 42px;background:radial-gradient(120% 140% at 50% -10%, #3a8ad6 0%, var(--tr-blue) 42%, var(--tr-blue-d) 100%);color:#fff;box-shadow:var(--tr-shadow)}
.tonie-reserve .tr-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:linear-gradient(90deg,var(--tr-red),var(--tr-yellow),var(--tr-red))}
.tonie-reserve .tr-hero img{border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.25);margin-bottom:16px}
.tonie-reserve .tr-hero h1{margin:6px 0 0;font-size:clamp(24px,4.2vw,38px);line-height:1.15;font-weight:800;letter-spacing:.2px;color:#fff}
.tonie-reserve .tr-accent{color:var(--tr-yellow)}
.tonie-reserve .tr-hero .tr-lead{margin:14px auto 0;max-width:640px;font-size:16px;opacity:.96}

/* Notice */
.tonie-reserve .tr-notice{background:var(--tr-card);border:1px solid var(--tr-line);border-radius:var(--tr-radius);box-shadow:var(--tr-shadow);padding:22px;margin:18px 0}
.tonie-reserve .tr-notice h2{margin:0 0 10px;font-size:18px;display:flex;align-items:center;gap:8px}
.tonie-reserve .tr-notice p{margin:8px 0;color:var(--tr-muted)}
.tonie-reserve .tr-callout{margin-top:14px;padding:14px 16px;border-radius:12px;background:#fff7f6;border:1px solid #f5ccc6;color:#b3261e;font-weight:600}

/* Form card */
.tonie-reserve .tr-form{background:var(--tr-card);border:1px solid var(--tr-line);border-radius:var(--tr-radius);box-shadow:var(--tr-shadow);padding:24px;margin:18px 0}
.tonie-reserve .tr-step{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:20px;font-weight:800}
.tonie-reserve .tr-step+.tr-step,.tonie-reserve .tr-summary+.tr-step{margin-top:28px}
.tonie-reserve .tr-num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--tr-yellow);color:#3a2d00;font-size:15px;font-weight:800;box-shadow:0 2px 0 var(--tr-yellow-d);flex:0 0 auto}

/* Products */
.tonie-reserve .tr-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tonie-reserve .tr-product{position:relative;display:flex;align-items:center;gap:12px;padding:14px;border:2px solid var(--tr-line);border-radius:14px;background:#fdfdff;cursor:pointer;transition:border-color .15s,box-shadow .15s;margin:0}
.tonie-reserve .tr-product:hover{border-color:#cfd6e6;box-shadow:0 6px 16px rgba(20,40,80,.07)}
.tonie-reserve .tr-product.is-selected,.tonie-reserve .tr-product:has(.tr-check:checked){border-color:var(--tr-yellow);background:#fffdf2;box-shadow:0 6px 18px rgba(255,203,5,.25)}
/* Pokeball icon drawn with a single pseudo-element (no empty span needed) */
.tonie-reserve .tr-product::before{content:"";flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:2px solid #222;box-shadow:0 1px 3px rgba(0,0,0,.25);background:radial-gradient(circle at 50% 50%, #222 0 5px, #fff 5px 7px, rgba(255,255,255,0) 7px),linear-gradient(#e3350d 0 calc(50% - 2px), #222 calc(50% - 2px) calc(50% + 2px), #fff calc(50% + 2px) 100%)}
.tonie-reserve .tr-check{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.tonie-reserve .tr-product-info{flex:1 1 auto;min-width:0}
.tonie-reserve .tr-product-name{display:block;font-weight:700}
.tonie-reserve .tr-product-price{display:block;color:var(--tr-muted);font-size:14px}
.tonie-reserve .tr-qty{flex:0 0 auto;display:inline-flex;align-items:center;border:1px solid var(--tr-line);border-radius:10px;overflow:hidden;background:#fff}
.tonie-reserve .tr-qty-btn{border:0;background:#f3f5fa;color:var(--tr-ink);width:32px;height:36px;font-size:18px;line-height:1;cursor:pointer;padding:0}
.tonie-reserve .tr-qty-btn:hover{background:#e9edf6}
.tonie-reserve .tr-qty-btn:disabled{opacity:.4;cursor:not-allowed;background:#f3f5fa}
.tonie-reserve .tr-qty-input{width:46px;height:36px;border:0;text-align:center;font-weight:700;font-size:15px;-moz-appearance:textfield;background:#fff}
.tonie-reserve .tr-qty-input::-webkit-outer-spin-button,.tonie-reserve .tr-qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tonie-reserve .tr-badge{position:absolute;top:-9px;right:12px;background:var(--tr-red);color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em;padding:3px 9px;border-radius:999px;box-shadow:0 2px 6px rgba(227,53,13,.4)}
.tonie-reserve .tr-badge--blue{background:var(--tr-blue)}

/* Summary */
.tonie-reserve .tr-summary{margin-top:16px;border:1px dashed #d6deec;border-radius:14px;padding:16px;background:#f8faff}
.tonie-reserve .tr-summary h3{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--tr-muted)}
.tonie-reserve .tr-summary-list .tr-empty{color:var(--tr-muted)}
.tonie-reserve .tr-line{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid #eef2f8}
.tonie-reserve .tr-total{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:17px}
.tonie-reserve .tr-total strong{font-size:22px;color:var(--tr-blue-d)}
.tonie-reserve .tr-shipping{margin:10px 0 0;font-size:13px;color:var(--tr-muted)}
.tonie-reserve .tr-items-error{display:none;margin-top:10px;color:#b3261e;font-weight:600}
.tonie-reserve .tr-items-error.is-visible{display:block}

/* Fields */
.tonie-reserve .tr-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tonie-reserve .tr-field{display:flex;flex-direction:column;gap:6px}
.tonie-reserve .tr-field.tr-col-2{grid-column:1 / -1}
.tonie-reserve .tr-field label{font-weight:700;font-size:14px}
.tonie-reserve .tr-field input{height:46px;border:1px solid var(--tr-line);border-radius:10px;padding:0 14px;font-size:15px;background:#fff;transition:border-color .15s,box-shadow .15s;width:100%}
.tonie-reserve .tr-field input:focus{outline:none;border-color:var(--tr-blue);box-shadow:0 0 0 3px rgba(42,117,187,.15)}

/* Consent */
.tonie-reserve .tr-consent{margin-top:18px;display:grid;gap:12px}
.tonie-reserve .tr-check-row{display:flex;align-items:flex-start;gap:10px;font-size:15px;cursor:pointer}
.tonie-reserve .tr-check-row input{margin-top:3px;width:18px;height:18px;accent-color:var(--tr-blue);flex:0 0 auto}
.tonie-reserve .tr-check-row a{color:var(--tr-blue);font-weight:600}

/* Submit */
.tonie-reserve .tr-actions{margin-top:24px;text-align:center}
.tonie-reserve .button-1.tr-submit,.tonie-reserve button.tr-submit{display:inline-block;font-size:18px;font-weight:800;padding:14px 32px;border-radius:12px;border:0;cursor:pointer;background:linear-gradient(180deg,#ffd83a,var(--tr-yellow));color:#3a2d00;box-shadow:0 6px 0 var(--tr-yellow-d),0 12px 22px rgba(255,203,5,.35);transition:transform .06s,box-shadow .06s}
.tonie-reserve .tr-submit:hover{transform:translateY(-1px)}
.tonie-reserve .tr-submit:active{transform:translateY(3px);box-shadow:0 3px 0 var(--tr-yellow-d),0 6px 12px rgba(255,203,5,.3)}
.tonie-reserve .tr-help{margin:16px 0 0;text-align:center;color:var(--tr-muted);font-size:14px}
.tonie-reserve .tr-help a{color:#128C7E;font-weight:700;text-decoration:none}

/* WhatsApp */
.tonie-reserve .tr-whatsapp{margin:18px 0;text-align:center;background:linear-gradient(180deg,#128C7E,#075E54);color:#fff;border-radius:var(--tr-radius);padding:24px;box-shadow:var(--tr-shadow)}
.tonie-reserve .tr-whatsapp h3{margin:0 0 6px;font-size:18px;color:#fff}
.tonie-reserve .tr-whatsapp p{margin:0 0 14px;opacity:.95}
.tonie-reserve .tr-wa-btn{display:inline-block;background:#25D366;color:#08311f;font-weight:800;text-decoration:none;padding:12px 22px;border-radius:10px;box-shadow:0 6px 16px rgba(0,0,0,.25)}

/* Footnote */
.tonie-reserve .tr-privacy{max-width:760px;margin:16px auto 0;text-align:center;font-size:13px;color:var(--tr-muted);font-style:italic}

@media (max-width:560px){
  .tonie-reserve .tr-fields{grid-template-columns:1fr}
}