.thb-app{--wine:#762b39;--gold:#c39a55;--ink:#302820;--line:#e4d8c9;font-family:Arial,sans-serif;color:var(--ink);max-width:1600px;margin:0 auto;background:#fbf8f3;border:1px solid #e7ddd0;border-radius:18px;overflow:hidden;box-shadow:0 12px 34px rgba(54,35,19,.12)}
.thb-app *{box-sizing:border-box}
.thb-hero{position:relative;width:100%;background:#38261c;overflow:hidden;border-bottom:5px solid var(--gold)}
.thb-hero img{display:block;width:100%;height:auto;aspect-ratio:2170/548;object-fit:cover;object-position:center center}
.thb-toolbar{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;padding:14px;background:linear-gradient(110deg,#211d19,#34271e 55%,#211d19);border-bottom:2px solid var(--gold)}
.thb-count-label{display:flex;align-items:center;gap:9px;font-size:15px;color:#fff}.thb-count-label span{font-size:25px;color:#d7ad61}
.thb-count-control{display:flex;align-items:center;gap:5px}
.thb-count-control button{width:37px;height:37px;border:0;border-radius:8px;background:var(--wine);color:#fff;font-size:24px;cursor:pointer}
.thb-count-control input{width:58px;height:37px;border:1px solid #d7cabb;border-radius:8px;text-align:center;font-size:17px;font-weight:800;color:var(--ink)}
.thb-action{border:0;border-radius:8px;padding:10px 14px;background:#76685d;color:#fff;font-size:12px;font-weight:700;cursor:pointer;transition:.18s}
.thb-action:hover,.thb-submit:hover{filter:brightness(1.08);transform:translateY(-1px)}
.thb-add{background:#a46a32}.thb-save{background:#6d4b3a}.thb-print{background:#3e6652}.thb-reset{background:#82786e}
.thb-section-heading{display:flex;align-items:center;gap:12px;padding:18px 20px 10px}
.thb-section-heading>span{display:flex;align-items:center;justify-content:center;flex:0 0 38px;height:38px;border-radius:50%;background:var(--wine);color:#fff;font-weight:800;border:2px solid #d9b779}
.thb-section-heading h2{margin:0;color:#4c2c24;font-family:Georgia,serif;font-size:21px}
.thb-section-heading p{margin:4px 0 0;color:#7c6d61;font-size:12px}
.thb-guest-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:10px 14px 18px}
.thb-guest-card{position:relative;min-width:0;padding:11px;border:1px solid color-mix(in srgb,var(--accent),white 55%);border-radius:12px;background:linear-gradient(180deg,var(--tint),#fff 28%);box-shadow:0 3px 10px #50351c0b}
.thb-card-head{display:flex;align-items:center;gap:9px;margin:0 26px 11px 0}
.thb-number{display:inline-flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:50%;background:var(--accent);color:#fff;font-size:17px;font-weight:800;box-shadow:0 3px 7px #0002}
.thb-card-head strong{display:block;color:#3c3028;font-size:14px}.thb-card-head small{display:block;color:#8b7a6b;font-size:10px;margin-top:2px}
.thb-remove{position:absolute;right:8px;top:8px;width:23px;height:23px;border:0;border-radius:50%;background:#fff;color:#a52d35;font-size:17px;cursor:pointer;box-shadow:0 1px 4px #0002}
.thb-label{display:block;margin:8px 0;color:#59483b;font-size:11px;font-weight:800}
.thb-label input,.thb-label select,.thb-label textarea{display:block;width:100%;min-width:0;margin-top:4px;padding:8px 8px;border:1px solid #d8cdbf;border-radius:7px;background:#fff;color:#382f28;font:normal 12px Arial,sans-serif}
.thb-label textarea{resize:vertical;min-height:48px}
.thb-booking-details{margin:0 14px 14px;padding:0 0 15px;background:#fff;border:1px solid #e5d8c9;border-radius:13px;box-shadow:0 3px 12px #513c2508}
.thb-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:8px 20px 18px}
.thb-detail-grid label{display:block;color:#5d493b;font-size:12px;font-weight:800}
.thb-detail-grid input,.thb-detail-grid select,.thb-detail-grid textarea{display:block;width:100%;margin-top:5px;padding:10px;border:1px solid #d9cdbf;border-radius:8px;background:#fff;color:#382f28;font:normal 13px Arial,sans-serif}
.thb-detail-grid .thb-wide{grid-column:1/-1}
.thb-submit-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 20px}
.thb-submit-note{max-width:560px;color:#7a6b5e;font-size:11px;line-height:1.5}
.thb-submit{border:1px solid #e0c17f;border-radius:9px;padding:13px 20px;background:linear-gradient(135deg,#812e3b,#5d1f2c);color:#fff;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 4px 10px #4c1c2528}
.thb-submit span{margin-left:12px;color:#f3d58e;font-size:18px}
.thb-summary{display:flex;align-items:stretch;justify-content:space-around;gap:6px;flex-wrap:wrap;margin:0 14px 14px;padding:12px;background:#fff;border:1px solid #ddc9ad;border-radius:12px}
.thb-summary>div{min-width:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3px 12px;border-left:1px solid #eee3d6}
.thb-summary>div:first-child{border-left:0}.thb-summary strong{font-size:22px;color:var(--wine)}.thb-summary span{font-size:10px;color:#75665a;text-align:center}
.thb-notice{min-height:0;text-align:center;color:#47724e;font-size:12px}.thb-notice:not(:empty){padding:0 12px 12px}
.thb-empty{grid-column:1/-1;padding:30px 14px;text-align:center;background:#fff;border:1px dashed #d5c4b1;border-radius:10px;color:#88786a}
.thb-status{margin:14px;padding:13px 16px;border-radius:9px;font-size:13px;font-weight:700}
.thb-status-success{background:#edf7ee;border:1px solid #b9d8bd;color:#245b31}.thb-status-error{background:#fff1ef;border:1px solid #e8b9b2;color:#963b32}
@media(max-width:1100px){.thb-guest-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.thb-hero img{aspect-ratio:1.65/1}.thb-guest-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:8px}.thb-toolbar{gap:7px;padding:10px}.thb-count-label{width:100%;justify-content:center}.thb-action{flex:1 1 40%;padding:10px 7px}.thb-detail-grid{grid-template-columns:1fr;padding:8px 12px 15px}.thb-detail-grid .thb-wide{grid-column:auto}.thb-submit-row{align-items:stretch;flex-direction:column;padding:0 12px}.thb-submit{width:100%}.thb-section-heading{padding:14px 12px 8px}.thb-section-heading h2{font-size:18px}.thb-summary>div{min-width:70px;padding:4px 6px}.thb-guest-card{padding:8px}.thb-label input,.thb-label select,.thb-label textarea{font-size:11px}}
@media print{body *{visibility:hidden!important}.thb-app,.thb-app *{visibility:visible!important}.thb-app{position:absolute;left:0;top:0;width:100%;max-width:none;box-shadow:none;border:0}.thb-toolbar,.thb-remove,.thb-submit,.thb-notice{display:none!important}.thb-guest-cards{grid-template-columns:repeat(5,1fr)}.thb-guest-card{break-inside:avoid}.thb-hero img{max-height:220px;object-fit:cover}}

/* v1.2.0 — guests are revealed from the centre of the pub scene as the guest count increases. */
.thb-hero{position:relative;isolation:isolate}
.thb-room-overlay{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.thb-seat-cover{position:absolute;left:0;bottom:0;width:9.8%;height:57%;background-image:url('images/pub-wood-panel.jpg');background-size:cover;background-position:center;border:1px solid rgba(75,42,20,.7);border-bottom:0;border-radius:8px 8px 0 0;box-shadow:0 -3px 9px rgba(28,13,5,.2);transform:translateY(0);transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .3s;opacity:1}
.thb-seat-cover.is-open{transform:translateY(110%);opacity:0}
.thb-room-name{position:absolute;z-index:4;bottom:2%;width:9.1%;min-height:12%;display:flex;align-items:center;justify-content:center;padding:3px 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:2px solid #e7c47e;border-radius:8px;background:linear-gradient(135deg,#3c2518,#21140e);color:#fff7e7;font-family:Georgia,serif;font-size:clamp(9px,.95vw,17px);font-weight:700;text-shadow:0 1px 2px #000;box-shadow:0 3px 8px rgba(0,0,0,.35);animation:thb-guest-pop .48s ease both}
@keyframes thb-guest-pop{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:650px){.thb-seat-cover{height:54%;width:9.8%}.thb-room-name{font-size:8px;padding:2px 1px;border-width:1px;bottom:2%;min-height:12%}}

/* v1.2.1 — clean empty pub scene; reveal individual guest portraits only when added. */
.thb-hero img{aspect-ratio:2170/388;object-fit:cover;object-position:center center}
.thb-room-overlay{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.thb-guest-figure{position:absolute;bottom:0;width:10.8%;height:66%;display:flex;align-items:flex-end;justify-content:center;z-index:3;animation:thb-guest-pop .55s cubic-bezier(.2,.8,.2,1) both}
.thb-guest-figure img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;aspect-ratio:auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.thb-room-name{bottom:2%;width:9.1%;min-height:12%;z-index:5}
@media(max-width:650px){.thb-guest-figure{width:10.8%;height:64%}.thb-room-name{width:9.1%;font-size:7px;bottom:2%;min-height:12%}}

/* v1.2.4 — Telecoms-style dish image preview on hover, without a persistent side panel. */
.thb-menu-field>span{display:block;margin-bottom:4px}
.thb-menu-wrap{position:relative}
.thb-menu-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:36px;padding:8px 10px;border:1px solid #d8cdbf;border-radius:7px;background:#fff;color:#382f28;font:normal 12px Arial,sans-serif;text-align:left;cursor:pointer}
.thb-chevron{color:#8b6a45;font-size:15px}
.thb-menu-list{display:none;position:absolute;left:0;top:calc(100% + 4px);z-index:1000;width:min(100%,310px);max-height:260px;overflow-y:auto;padding:5px;background:#fff;border:1px solid #d8c6ad;border-radius:10px;box-shadow:0 12px 28px rgba(40,25,12,.24)}
.thb-menu-wrap.is-open .thb-menu-list{display:block}
.thb-menu-option{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:5px 7px;border:0;border-radius:7px;background:#fff;color:#382f28;font:normal 12px Arial,sans-serif;text-align:left;cursor:pointer}
.thb-menu-option:hover,.thb-menu-option:focus{background:#f6ecdc;color:#6e2634;outline:0}
.thb-menu-option img,.thb-option-placeholder{display:flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;height:38px;object-fit:cover;border-radius:5px;background:#f2e9dc}
.thb-option-placeholder{font-size:20px}
.thb-dish-preview{display:none;position:absolute;z-index:1010;left:calc(100% + 10px);top:0;width:220px;padding:7px;border:1px solid #d7b978;border-radius:11px;background:#fffaf1;box-shadow:0 12px 28px rgba(40,25,12,.28);pointer-events:none}
.thb-dish-preview.is-visible{display:block}
.thb-dish-preview img{display:none;width:100%;height:145px;object-fit:cover;border-radius:7px}
.thb-dish-preview.has-image img{display:block}
.thb-dish-preview-caption{padding:7px 4px 3px;color:#5b3027;font-family:Georgia,serif;font-size:14px;font-weight:700;text-align:center}
.thb-no-menu-items{padding:12px;color:#85766a;font-size:11px}
@media(max-width:700px){.thb-dish-preview{left:auto;right:0;top:calc(100% + 5px);width:190px}.thb-dish-preview img{height:115px}.thb-menu-list{width:100%}}
@media print{.thb-menu-list,.thb-dish-preview{display:none!important}}


/* v1.2.6 — preserve the complete pub photograph, including the ceiling.
   Use the image's natural 2170:548 ratio instead of the earlier cropped 2170:388 frame. */
.thb-hero{height:auto!important;min-height:0!important}
.thb-hero>img{display:block;width:100%;height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center top!important}
@media(max-width:700px){.thb-hero>img{height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center top!important}}
@media print{.thb-hero>img{max-height:none!important;height:auto!important;object-fit:contain!important}}

/* v1.2.7 — taller pub artwork with the complete vaulted ceiling and rafters. */
.thb-hero{height:auto!important;overflow:hidden}
.thb-hero>img{width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center top!important}


/* v1.2.8 — normalize guest portraits to Guest 6's consistent displayed height.
   Preserve each transparent PNG's natural aspect ratio instead of stretching
   every portrait to the same fixed width. */
.thb-guest-figure{width:10.8%;height:66%;overflow:visible}
.thb-guest-figure img{width:auto!important;height:100%!important;max-width:none!important;max-height:100%!important;object-fit:contain!important;object-position:center bottom!important;flex:0 0 auto}
@media(max-width:650px){.thb-guest-figure{width:10.8%;height:64%;overflow:visible}.thb-guest-figure img{width:auto!important;height:100%!important;max-width:none!important;max-height:100%!important}}


/* v1.2.9 — use a cache-busted full-height pub image and reserve its true 1907:825 frame. */
.thb-app .thb-hero{position:relative!important;display:block!important;width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:1907/825!important;overflow:hidden!important}
.thb-app .thb-hero>img{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;min-height:100%!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center top!important}
.thb-app .thb-guest-figure{height:38%!important}
.thb-app .thb-room-name{min-height:7%!important}
.thb-app .thb-seat-cover{height:30%!important}
@media(max-width:700px){.thb-app .thb-hero{aspect-ratio:1907/825!important}.thb-app .thb-guest-figure{height:38%!important}.thb-app .thb-room-name{min-height:7%!important}.thb-app .thb-seat-cover{height:30%!important}}
@media print{.thb-app .thb-hero{aspect-ratio:1907/825!important}.thb-app .thb-hero>img{position:absolute!important;height:100%!important}}


/* v1.3.0 — reduce portrait height while retaining uniform sizing and full pub ceiling. */
.thb-app .thb-guest-figure{height:25%!important}
.thb-app .thb-guest-figure img{height:100%!important;width:auto!important;max-height:100%!important;object-fit:contain!important;object-position:center bottom!important}
@media(max-width:700px){.thb-app .thb-guest-figure{height:25%!important}.thb-app .thb-guest-figure img{height:100%!important;width:auto!important;max-height:100%!important}}


/* v1.3.1 — lower guest name labels to the bottom edge of the pub scene. */
.thb-app .thb-room-name{bottom:0!important;transform:translateY(0)!important}
@media(max-width:700px){.thb-app .thb-room-name{bottom:0!important}}

/* v1.4.0 — additional guest rows in the oak-panelled pub snug. */
.thb-extra-rows{display:flex;flex-direction:column;gap:0;background:#241711}
.thb-extra-row{position:relative;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));align-items:end;gap:5px;min-height:178px;padding:10px 8px 7px;overflow:hidden;background-image:linear-gradient(180deg,rgba(28,13,7,.04) 0%,rgba(28,13,7,.12) 48%,rgba(30,8,14,.28) 100%),url('images/three-horseshoes-pub-full-ceiling-v129.jpg');background-size:cover;background-position:center 48%;border-top:3px solid #c49a55;border-bottom:3px solid #9b713c;box-shadow:inset 0 8px 12px #12090588,inset 0 -5px 8px #12090588}
.thb-extra-row:before{content:"";position:absolute;left:0;right:0;bottom:8px;height:38%;z-index:0;background:linear-gradient(180deg,#6d2735,#451522 70%,#2d1018);border-top:3px solid #a76b45;border-bottom:5px solid #9a713e;box-shadow:inset 0 5px 8px #ffffff16,inset 0 -7px 9px #0008}
.thb-extra-row:after{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#8e6335,#e0bd76,#8e6335);z-index:1}
.thb-extra-guest{position:relative;z-index:2;min-width:0;height:160px;display:flex;align-items:flex-end;justify-content:center}
.thb-extra-guest img{display:block;max-width:100%;width:auto;height:150px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 2px 3px #0008)}
.thb-extra-name{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:96%;min-height:29px;display:flex;align-items:center;justify-content:center;padding:3px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:2px solid #e7c47e;border-radius:8px;background:linear-gradient(135deg,#3c2518,#21140e);color:#fff7e7;font-family:Georgia,serif;font-size:clamp(9px,.9vw,15px);font-weight:700;text-shadow:0 1px 2px #000;box-shadow:0 3px 8px #0006}
@media(max-width:700px){.thb-extra-row{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:6px;padding:9px 6px}.thb-extra-guest{height:132px}.thb-extra-guest img{height:100px}.thb-extra-name{font-size:10px;min-height:25px}}
@media(max-width:420px){.thb-extra-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:6px 3px}.thb-extra-guest{height:112px}.thb-extra-guest img{height:96px}.thb-extra-name{font-size:8px;min-height:22px;padding:2px}}
@media print{.thb-extra-row{break-inside:avoid}.thb-extra-guest{height:150px}.thb-extra-guest img{height:125px}}

/* v1.4.1 gender selection test controls and no-repeat portrait placeholders */
.thb-app .thb-gender-field{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border:1px solid #d9c7b3;border-radius:9px;padding:9px 12px;margin:10px 0;background:#fffaf4}
.thb-app .thb-gender-field legend{font-weight:700;padding:0 5px;color:#6e2631}
.thb-app .thb-gender-field label{display:inline-flex;align-items:center;gap:6px;font-weight:500;cursor:pointer}
.thb-app .thb-gender-field input[type=radio]{accent-color:#8b2635;width:16px;height:16px}
.thb-app .thb-portrait-placeholder{width:100%;height:100%;min-height:90px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#684333,#2d211c);color:#f4d58b;font-size:30px;border-radius:8px}
.thb-app .thb-no-portrait{background:rgba(60,35,25,.2)}


/* v1.4.6 — snug portraits are normalised to a consistent face scale and shared display frame. */
.thb-app .thb-extra-guest{align-items:flex-end!important}
.thb-app .thb-extra-guest img{height:150px!important;width:auto!important;max-width:100%!important;object-fit:contain!important;object-position:center bottom!important;flex:0 0 auto}
@media(max-width:700px){.thb-app .thb-extra-guest img{height:100px!important}}
@media(max-width:420px){.thb-app .thb-extra-guest img{height:96px!important}}
