/* ------------------------------------------------------------------
   Whisky EDU - exhibitor area theme
   Restyles the Bootstrap 3 markup the customer pages already use, in the
   same palette and type as whiskyedu.org. No markup changes required.
   ------------------------------------------------------------------ */

:root{
    --we-amber:#e78f34;
    --we-amber-dark:#c97e2a;
    --we-amber-soft:#f0b968;
    --we-ink:#1a1206;
    --we-ink-soft:#6b5c48;
    --we-cream:#fbf6ee;
    --we-cream-deep:#f5efe4;
    --we-line:#e4d9c6;
    --we-radius:12px;
}

/* ---------- page shell ---------- */

body{
    font-family:'Barlow',-apple-system,system-ui,"Segoe UI",sans-serif;
    font-size:16px;
    line-height:1.6;
    color:var(--we-ink);
    background:
        radial-gradient(1100px 460px at 50% -220px, #fff6e6 0%, rgba(255,246,230,0) 70%),
        var(--we-cream);
    -webkit-font-smoothing:antialiased;
    padding-bottom:60px;
}

/* the logo strip most pages open with */
body > .container-fluid > .row:first-child img,
body > .container > .row:first-child img{max-height:78px; width:auto;}

/* ---------- type ---------- */

h1, h2, h3, .panel-title{
    font-family:'Playfair Display',Georgia,serif;
    font-weight:600;
    color:var(--we-ink);
    letter-spacing:-.01em;
}
h1{font-size:32px;}
h2{font-size:27px;}
h3{font-size:22px;}
h4, h5{font-weight:600; color:var(--we-ink);}

a{color:var(--we-amber-dark);}
a:hover, a:focus{color:var(--we-ink);}

/* the page title several views centre at the top */
body > .container > h1,
body > .container-fluid > h1,
.container > div > h1{text-align:center; margin:10px 0 26px;}

/* ---------- panels become cards ---------- */

.panel{
    background:#fff;
    border:1px solid var(--we-line);
    border-radius:var(--we-radius);
    box-shadow:0 1px 2px rgba(26,18,6,.04), 0 16px 40px -24px rgba(26,18,6,.22);
    overflow:hidden;
}
.panel + .panel{margin-top:22px;}

.panel-heading,
.panel-default > .panel-heading,
.panel-primary > .panel-heading,
.panel-info > .panel-heading{
    background:linear-gradient(180deg,#fffdf9 0%,var(--we-cream) 100%) !important;
    border-bottom:1px solid var(--we-line) !important;
    color:var(--we-ink) !important;
    padding:16px 22px;
    font-size:17px;
}
.panel-heading .panel-title{font-size:19px; margin:0;}
.panel-body{padding:22px;}

/* ---------- tables ---------- */

.table{background:#fff; margin-bottom:0;}
.table > thead > tr > th{
    background:var(--we-cream);
    border-bottom:1px solid var(--we-line) !important;
    color:var(--we-ink-soft);
    font-size:12px;
    font-weight:600;
    letter-spacing:.09em;
    text-transform:uppercase;
    padding:13px 14px;
    vertical-align:middle;
}
.table > tbody > tr > td,
.table > tbody > tr > th{
    border-top:1px solid #f0e8da !important;
    padding:13px 14px;
    vertical-align:middle;
}
.table > tbody > tr:hover > td{background:#fdfaf4;}
.table-user-information > tbody > tr > td{border-top:1px solid #f0e8da;}

/* ---------- forms ---------- */

label{
    font-size:12px;
    font-weight:600;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--we-ink-soft);
    margin-bottom:6px;
}
.form-control{
    height:44px;
    padding:9px 14px;
    font-size:15.5px;
    color:var(--we-ink);
    background:#fff;
    border:1px solid var(--we-line);
    border-radius:9px;
    box-shadow:none;
    transition:border-color .15s ease, box-shadow .15s ease;
}
textarea.form-control{height:auto; min-height:80px;}
.form-control:focus{
    border-color:var(--we-amber);
    box-shadow:0 0 0 3px rgba(231,143,52,.18);
    outline:none;
}
.form-control[disabled], .form-control[readonly]{background:var(--we-cream-deep); color:var(--we-ink-soft);}
select.form-control{height:44px;}

.help-block{font-size:13.5px; color:#9a3b22;}

/* ---------- buttons ---------- */

.btn{
    font-family:inherit;
    font-size:15.5px;
    font-weight:600;
    letter-spacing:.02em;
    padding:11px 24px;
    border-radius:9px;
    border:1px solid transparent;
    box-shadow:none;
    transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:active{transform:translateY(0);}

.btn.green, .btn-warning, .btn-primary, .btn-success, input[type="submit"].btn{
    background:linear-gradient(180deg,var(--we-amber-soft) 0%,var(--we-amber) 55%,var(--we-amber-dark) 100%) !important;
    border-color:var(--we-amber-dark) !important;
    color:#fff !important;
    box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 8px 20px -10px rgba(199,120,35,.7);
}
.btn.green:hover, .btn-warning:hover, .btn-primary:hover, .btn-success:hover,
.btn.green:focus, .btn-warning:focus, .btn-primary:focus{
    background:linear-gradient(180deg,var(--we-amber-soft) 0%,var(--we-amber) 45%,var(--we-amber-dark) 100%) !important;
    filter:saturate(1.06);
    transform:translateY(-1px);
    color:#fff !important;
}
.btn.grey, .btn-default{
    background:#fff !important;
    border-color:var(--we-line) !important;
    color:var(--we-ink) !important;
}
.btn.grey:hover, .btn-default:hover{background:var(--we-cream) !important; color:var(--we-ink) !important;}
.btn[disabled], .btn.disabled{opacity:.5; transform:none !important;}

/* the three blue shortcut tiles on the dashboard */
.container a[style*="background"], td[bgcolor]{border-radius:9px;}

/* ---------- alerts ---------- */

.alert{
    border-radius:9px;
    border:1px solid transparent;
    padding:13px 16px;
    font-size:15px;
}
.alert-success{background:#f0f8f1; border-color:#cfe6d3; color:#2b5c35;}
.alert-danger, .alert-error{background:#fdf1ee; border-color:#f3d2c8; color:#9a3b22;}
.alert-info{background:#f4f8fb; border-color:#d3e2ee; color:#2c5570;}
.alert-warning{background:#fdf7ec; border-color:#f0e0bf; color:#7a5717;}

/* ---------- the "Dashboard | Events | Brand logo" strip ---------- */

.dev_active{
    background:var(--we-amber) !important;
    border-radius:6px;
    padding:6px 11px !important;
    font-weight:600;
}
.dev_active:hover{background:var(--we-amber-dark) !important;}

/* ---------- small screens ---------- */

@media (max-width:767px){
    body{font-size:15.5px; padding-bottom:40px;}
    h1{font-size:25px;}
    h2{font-size:22px;}
    .panel-body{padding:16px;}
    .panel-heading{padding:14px 16px;}
    .table > thead > tr > th,
    .table > tbody > tr > td{padding:10px 9px; font-size:14.5px;}
    .btn{width:100%; margin-bottom:8px; margin-left:0 !important;}
    .btn.pull-left, .btn.pull-right{float:none !important;}
    /* wide tables scroll instead of breaking the page */
    .table-responsive, .panel-body > .table, .container > .table{
        display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
    }
}

/* ------------------------------------------------------------------
   Header cells on these pages are plain <th> (no <thead>) and wrap
   their label in <h4 class="panel-title">, so target that too.
   ------------------------------------------------------------------ */

.table > tbody > tr > th,
.table > tr > th{
    background:var(--we-cream);
    border-bottom:1px solid var(--we-line) !important;
    border-top:none !important;
    padding:13px 14px;
    vertical-align:middle;
}
.table th .panel-title,
.table th h4{
    font-family:'Barlow',sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--we-ink-soft);
    margin:0;
}
.table th .panel-title strong,
.table th h4 strong{font-weight:600;}

/* ------------------------------------------------------------------
   Dashboard shortcut tiles. The view sets a fixed 90x70 blue box with
   a float and a hard left margin; replaced here with a flexible row of
   cards that also behaves on a phone.
   ------------------------------------------------------------------ */

.ui-a-link{
    display:flex !important;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    margin:0 auto 26px;
    float:none !important;
}
.ui-a-link a,
.ui-a-link a:first-child,
.ui-a-link a:nth-child(2){
    display:flex !important;
    align-items:center;
    justify-content:center;
    text-align:center;
    float:none !important;
    width:auto !important;
    min-width:150px;
    height:auto !important;
    margin:0 !important;
    padding:15px 20px !important;
    background:#fff !important;
    border:1px solid var(--we-line);
    border-top:3px solid var(--we-amber);
    border-radius:10px;
    color:var(--we-ink) !important;
    font-size:15px;
    font-weight:600;
    line-height:1.35;
    box-shadow:0 1px 2px rgba(26,18,6,.04), 0 10px 24px -16px rgba(26,18,6,.3);
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ui-a-link a:hover{
    transform:translateY(-2px);
    border-top-color:var(--we-amber-dark);
    box-shadow:0 1px 2px rgba(26,18,6,.05), 0 16px 30px -18px rgba(26,18,6,.38);
    text-decoration:none;
}

/* the big "Dashboard" heading the view sizes inline */
.row > div[style*="font-size:45px"]{
    font-family:'Playfair Display',Georgia,serif !important;
    font-size:34px !important;
    font-weight:600;
    color:var(--we-ink);
    padding-top:34px !important;
}

@media (max-width:600px){
    .ui-a-link a{min-width:100%;}
    .row > div[style*="font-size:45px"]{font-size:27px !important; padding-top:18px !important;}
}

/* ------------------------------------------------------------------
   The "Dashboard | Events | Brand logo | ..." strip that sits on every
   signed-in page. The views position it with inline floats and fixed
   margins, which wraps badly; make it a tidy centred bar instead.
   ------------------------------------------------------------------ */

div[class*="col-sm-5"][style*="float: right"],
div[class*="col-sm-5"][style*="float:right"]{
    float:none !important;
    width:100% !important;
    margin:0 auto 22px !important;
    padding:10px 14px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:2px 4px;
    background:#fff;
    border:1px solid var(--we-line);
    border-radius:10px;
    box-shadow:0 1px 2px rgba(26,18,6,.04);
}
div[class*="col-sm-5"][style*="float: right"] a,
div[class*="col-sm-5"][style*="float:right"] a{
    padding:6px 11px;
    border-radius:6px;
    font-size:14.5px;
    font-weight:500;
    color:var(--we-ink-soft);
    text-decoration:none;
    white-space:nowrap;
}
div[class*="col-sm-5"][style*="float: right"] a:hover{
    background:var(--we-cream); color:var(--we-ink);
}
/* the "|" separators the markup uses between links */
div[class*="col-sm-5"] a[href*="javascript:void(0)"]{
    padding:0; color:var(--we-line); pointer-events:none;
}
/* company name shown beside the strip */
h1[style*="font-size:16px"]{
    font-family:'Barlow',sans-serif !important;
    font-size:13px !important;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--we-ink-soft);
    margin:0 0 6px;
}

/* ------------------------------------------------------------------
   Consistency layer
   The old views set colours and a dead background image inline. These
   rules neutralise them so every page follows the same sequence:
   logo -> centred card -> content, in one type system.
   ------------------------------------------------------------------ */

/* the background image points at a domain that no longer resolves */
[style*="whiskiesoftheworld.com"]{
    background-image:none !important;
    background:transparent !important;
    height:auto !important;
    min-height:0 !important;
}

/* headings and labels were hard-coded to a gold that is hard to read */
[style*="color:#B8902E"],
[style*="color: #B8902E"],
[style*="color:#B8902E"] label,
[style*="color: #B8902E"] label{
    color:var(--we-ink) !important;
}
h1[style*="#B8902E"], h2[style*="#B8902E"], h3[style*="#B8902E"]{
    color:var(--we-ink) !important;
}
h4[style*="#B8902E"], h5[style*="#B8902E"]{
    font-family:'Barlow',sans-serif !important;
    font-weight:400 !important;
    font-size:16px !important;
    color:var(--we-ink-soft) !important;
}
label[style*="#B8902E"]{color:var(--we-ink-soft) !important;}

/* one page rhythm for the simple, single-purpose screens */
.we-centre{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:calc(100vh - 40px);
    padding:40px 20px;
}
.we-centre__brand{margin-bottom:30px;}
.we-centre__brand img{max-height:82px; width:auto;}
.we-centre__card{
    width:100%;
    max-width:440px;
    background:#fff;
    border:1px solid var(--we-line);
    border-radius:var(--we-radius);
    overflow:hidden;
    box-shadow:0 1px 2px rgba(26,18,6,.04), 0 18px 48px -20px rgba(26,18,6,.22);
}
.we-centre__card--wide{max-width:760px;}
.we-centre__card::before{
    content:""; display:block; height:3px;
    background:linear-gradient(90deg,var(--we-amber) 0%,var(--we-amber-soft) 55%,var(--we-amber) 100%);
}
.we-centre__body{padding:38px 40px 34px;}
.we-centre__eyebrow{
    font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
    color:var(--we-amber-dark); margin:0 0 8px;
}
.we-centre__title{
    font-family:'Playfair Display',Georgia,serif; font-weight:600;
    font-size:29px; line-height:1.2; margin:0 0 6px; color:var(--we-ink);
}
.we-centre__lede{margin:0 0 26px; font-size:16px; color:var(--we-ink-soft); line-height:1.55;}
.we-centre__foot{
    padding:18px 40px 22px; border-top:1px solid var(--we-line);
    background:var(--we-cream); font-size:15px; color:var(--we-ink-soft); text-align:center;
}
.we-centre__foot a{color:var(--we-amber-dark); font-weight:600; text-decoration:none;}
.we-centre__foot a:hover{text-decoration:underline;}

@media (max-width:560px){
    .we-centre{min-height:auto; padding:28px 14px 48px;}
    .we-centre__body{padding:26px 20px 24px;}
    .we-centre__foot{padding:16px 20px 20px;}
    .we-centre__title{font-size:25px;}
}

/* full-width submit used on the sign-in and sign-up cards */
.btn.we-block{
    display:block;
    width:100%;
    margin-top:22px;
    padding:14px 24px;
    font-size:17px;
}
/* keep the captcha widget from overflowing a narrow card */
.we-captcha{margin-bottom:6px;}
.we-captcha .g-recaptcha{transform-origin:0 0; display:inline-block;}
@media (max-width:420px){
    .we-captcha .g-recaptcha{transform:scale(.82);}
    .we-captcha{height:62px;}
}

/* ==================================================================
   Signed-in header
   Rendered by themes/we_header.php. The old scattered logo row, link
   strip and company name are hidden so pages start cleanly below it.
   ================================================================== */

.wehdr{
    position:sticky; top:0; z-index:900;
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(1.4) blur(8px);
    border-bottom:1px solid var(--we-line);
    box-shadow:0 1px 0 rgba(26,18,6,.03), 0 8px 24px -18px rgba(26,18,6,.4);
}
.wehdr::before{
    content:""; display:block; height:3px;
    background:linear-gradient(90deg,var(--we-amber) 0%,var(--we-amber-soft) 50%,var(--we-amber) 100%);
}
.wehdr__inner{
    max-width:1180px; margin:0 auto;
    padding:10px 20px;
    display:flex; align-items:center; gap:18px;
}

.wehdr__logo{display:flex; align-items:center; flex:none;}
.wehdr__logo img{height:42px; width:auto; display:block;}

.wehdr__nav{
    display:flex; align-items:center; gap:2px;
    flex:1 1 auto; flex-wrap:wrap;
}
.wehdr__tab{
    position:relative;
    padding:9px 14px;
    border-radius:8px;
    font-size:15px; font-weight:500;
    color:var(--we-ink-soft);
    text-decoration:none;
    white-space:nowrap;
    transition:background .15s ease, color .15s ease;
}
.wehdr__tab:hover{background:var(--we-cream); color:var(--we-ink); text-decoration:none;}
.wehdr__tab.is-active{
    background:linear-gradient(180deg,var(--we-amber-soft) 0%,var(--we-amber) 55%,var(--we-amber-dark) 100%);
    color:#fff;
    font-weight:600;
    box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 6px 16px -8px rgba(199,120,35,.8);
}
.wehdr__tab.is-active:hover{color:#fff; background:linear-gradient(180deg,var(--we-amber-soft) 0%,var(--we-amber) 45%,var(--we-amber-dark) 100%);}

.wehdr__user{display:flex; align-items:center; gap:14px; flex:none;}
.wehdr__who{
    max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
    color:var(--we-ink-soft);
    padding-left:16px; border-left:1px solid var(--we-line);
}
.wehdr__out{
    padding:8px 15px; border-radius:8px;
    border:1px solid var(--we-line); background:#fff;
    font-size:14.5px; font-weight:600; color:var(--we-ink); text-decoration:none;
    white-space:nowrap;
}
.wehdr__out:hover{background:var(--we-cream); color:var(--we-ink); text-decoration:none;}

.wehdr__burger{
    display:none; flex:none;
    width:42px; height:38px; padding:9px 10px;
    background:#fff; border:1px solid var(--we-line); border-radius:8px; cursor:pointer;
}
.wehdr__burger span{display:block; height:2px; background:var(--we-ink); border-radius:2px;}
.wehdr__burger span + span{margin-top:4px;}

/* ---- hide the old header pieces on signed-in pages ---- */

body.we-app img[src$="images/logo.png"]{display:none !important;}
body.we-app div[style*="padding: 40px 0 30px"],
body.we-app div[style*="padding:40px 0 30px"],
body.we-app div[style*="padding: 55px 0 0 0"],
body.we-app div[style*="padding: 70px 0 30px"]{padding:0 !important;}
body.we-app div[class*="col-sm-5"][style*="float: right"],
body.we-app div[class*="col-sm-5"][style*="float:right"]{display:none !important;}
body.we-app h1[style*="font-size:16px"]{display:none !important;}
body.we-app .ui-a-link{margin-top:6px;}

/* first content block sits a comfortable distance below the bar */
body.we-app > .container,
body.we-app > .container-fluid{padding-top:26px;}

@media (max-width:960px){
    .wehdr__inner{flex-wrap:wrap; gap:10px;}
    .wehdr__burger{display:block; margin-left:auto; order:2;}
    .wehdr__user{order:3;}
    .wehdr__nav{
        order:4; width:100%;
        display:none;
        flex-direction:column; align-items:stretch; gap:2px;
        padding-top:8px; border-top:1px solid var(--we-line);
    }
    .wehdr.is-open .wehdr__nav{display:flex;}
    .wehdr__tab{padding:11px 14px;}
    .wehdr__logo img{height:36px;}
    .wehdr__who{max-width:120px;}
}

/* the rule above hides the logo the old views print; the header's own logo stays */
body.we-app .wehdr__logo img{display:block !important;}

/* ==================================================================
   Dropdowns
   The browser paints the open list itself, so what we can reach is the
   closed control, the list background and each option. Chrome and
   Firefox on Windows honour these; the highlight bar on the item under
   the cursor is drawn by the operating system.
   ================================================================== */

select,
select.form-control{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    padding-right:40px;
    background-color:#fff;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--we-amber-dark) 50%),
        linear-gradient(135deg, var(--we-amber-dark) 50%, transparent 50%);
    background-position:
        calc(100% - 20px) calc(50% + 2px),
        calc(100% - 14px) calc(50% + 2px);
    background-size:6px 6px, 6px 6px;
    background-repeat:no-repeat;
    cursor:pointer;
    color:var(--we-ink);
}
select:focus,
select.form-control:focus{
    border-color:var(--we-amber);
    box-shadow:0 0 0 3px rgba(231,143,52,.18);
    outline:none;
}
select:hover{background-color:#fffdf9;}

/* the open list */
select option{
    background-color:var(--we-cream);
    color:var(--we-ink);
    padding:10px 12px;
    font-size:15.5px;
}
select option:hover,
select option:focus{
    background-color:var(--we-amber-soft);
    color:var(--we-ink);
}
select option:checked,
select option[selected]{
    background:var(--we-amber) linear-gradient(0deg, var(--we-amber), var(--we-amber));
    color:#fff;
    font-weight:600;
}
select option:disabled{color:#b6aa98;}

/* multi-selects and list boxes follow the same palette */
select[multiple], select[size]{
    background-image:none;
    padding-right:14px;
    height:auto;
}
select[multiple] option:checked{
    background:var(--we-amber) linear-gradient(0deg, var(--we-amber), var(--we-amber));
    color:#fff;
}

/* ---- our own dropdown (js/we-select.js) ---- */

.wesel{position:relative; display:block;}
.wesel__native{
    position:absolute; width:1px; height:1px;
    margin:-1px; padding:0; border:0;
    clip:rect(0 0 0 0); clip-path:inset(50%);
    overflow:hidden; white-space:nowrap;
}
.wesel__button{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    width:100%; height:44px;
    padding:9px 14px;
    font-family:inherit; font-size:15.5px; line-height:1.3; text-align:left;
    color:var(--we-ink); background:#fff;
    border:1px solid var(--we-line); border-radius:9px;
    cursor:pointer;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.wesel__button:hover{background:#fffdf9;}
.wesel__button:focus{
    outline:none; border-color:var(--we-amber);
    box-shadow:0 0 0 3px rgba(231,143,52,.18);
}
.wesel__button[disabled]{background:var(--we-cream-deep); color:var(--we-ink-soft); cursor:not-allowed;}
.wesel.is-open .wesel__button{
    border-color:var(--we-amber);
    box-shadow:0 0 0 3px rgba(231,143,52,.18);
}
.wesel__label{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wesel__label.is-placeholder{color:#b6aa98;}
.wesel__caret{
    flex:none; width:0; height:0;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:6px solid var(--we-amber-dark);
    transition:transform .15s ease;
}
.wesel.is-open .wesel__caret{transform:rotate(180deg);}

.wesel__list{
    position:absolute; z-index:1000; top:calc(100% + 6px); left:0; right:0;
    max-height:264px; overflow-y:auto;
    margin:0; padding:6px;
    list-style:none;
    background:#fff;
    border:1px solid var(--we-line); border-radius:10px;
    box-shadow:0 1px 2px rgba(26,18,6,.05), 0 18px 40px -16px rgba(26,18,6,.32);
}
.wesel__option{
    padding:10px 12px;
    border-radius:7px;
    font-size:15.5px; color:var(--we-ink);
    cursor:pointer;
    transition:background .1s ease, color .1s ease;
}
.wesel__option:hover{background:var(--we-cream); color:var(--we-ink);}
.wesel__option.is-selected{
    background:linear-gradient(180deg,var(--we-amber-soft) 0%,var(--we-amber) 55%,var(--we-amber-dark) 100%);
    color:#fff; font-weight:600;
}
.wesel__option.is-selected:hover{color:#fff;}
.wesel__option.is-disabled{color:#c3b8a6; cursor:not-allowed;}
.wesel__list::-webkit-scrollbar{width:10px;}
.wesel__list::-webkit-scrollbar-thumb{background:var(--we-line); border-radius:6px; border:3px solid #fff;}

/* account links in the header */
.wehdr__pw{
    padding:8px 13px; border-radius:8px;
    font-size:14.5px; font-weight:500; color:var(--we-ink-soft);
    text-decoration:none; white-space:nowrap;
}
.wehdr__pw:hover{background:var(--we-cream); color:var(--we-ink); text-decoration:none;}

/* ==================================================================
   Responsive corrections
   The old views position things with inline floats, fixed offsets and
   left margins, which push past the screen on a phone.
   ================================================================== */

@media (max-width:767px){

    /* inline "left: 120px" style offsets that shove a column off-screen */
    body.we-app div[style*="left: 120px"],
    body.we-app div[style*="left:120px"]{
        left:0 !important;
        float:none !important;
        width:100% !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }

    /* floated buttons with a hard left margin */
    body .btn.margd,
    body .btn.pull-right,
    body .btn.pull-left{
        float:none !important;
        margin-left:0 !important;
        margin-right:0 !important;
        width:100%;
    }

    /* the label/value tables used across the exhibitor forms */
    .table-user-information,
    .table{max-width:100%;}
    /* Only the wide table scrolls - never the whole panel.

       A <table> ignores overflow-x unless it is also display:block, so the
       rule here did nothing and .panel-body ended up carrying the scroll
       instead. That dragged the headings, labels and everything else
       sideways with the table, which is what the client saw on a phone:
       the page apparently shifted, with blank space beside it. */
    .panel-body{ overflow-x:visible; }

    .panel > .table-responsive,
    div[class*="col-"] > .table,
    .panel-body > .table,
    .panel-body > form > .table,
    .panel-body table.table-user-information{
        display:block;
        width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    /* nothing should be able to widen the page itself */
    html, body{overflow-x:hidden;}
    body img, body iframe, body table{max-width:100%;}
}

/* tablet: the same floats cause a milder version of the problem */
@media (min-width:768px) and (max-width:991px){
    body.we-app div[style*="left: 120px"],
    body.we-app div[style*="left:120px"]{left:0 !important;}
    .wehdr__inner{padding-left:14px; padding-right:14px;}
}

/* the old views print the logo with width="220"; keep its real proportions */
body.we-guest img[src$="images/logo.png"],
body:not(.we-app) img[src$="images/logo.png"]{
    width:auto !important;
    height:auto !important;
    max-height:82px;
    max-width:100%;
}
@media (max-width:560px){
    body.we-guest img[src$="images/logo.png"],
    body:not(.we-app) img[src$="images/logo.png"]{max-height:64px;}
}

/* ==================================================================
   Booth "Type" dropdowns
   ------------------------------------------------------------------
   Reported by the client: the label showed as "Sta..." instead of
   "Standard".

   The arrow needs room, so these selects carry padding-right. On a
   150px box that was 40px - over a quarter of the width spent on the
   arrow - and the text had no left padding at all, so it sat on the
   border. The widths themselves live in the views, because those set
   min-width inline and inline wins.

   Rows added after the page loads (the "add another table" button)
   are built in JavaScript and never pass through we-select.js, so
   they stay plain selects. A native select too narrow for its label
   is truncated by the browser - that was the client's "Sta...".
   ================================================================== */

select[id^="booth_type"],
select[id^="event_type"]{
    padding-left:14px;
    padding-right:34px;
    text-overflow:ellipsis;
}

/* Keep the wrapped and the unwrapped rows looking the same. */
.wesel__button{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }

/* The visible control is the .wesel wrapper, not the select - the select is
   hidden at 1px, so its inline min-width never reaches the screen. The wrapper
   sits inside a col-md-4, i.e. a third of an already narrow column, which is
   what squeezed "Standard" down to "Sta...". Give the wrapper, its column and
   the cell a floor instead. */
.wesel:has(select[id^="booth_type"]),
.wesel:has(select[id^="event_type"]){ min-width:170px; }

td .form-group > [class*="col-md-"]:has(.wesel select[id^="booth_type"]),
td .form-group > [class*="col-md-"]:has(.wesel select[id^="event_type"]){
    width:auto; padding-left:0; padding-right:0;
}

td:has(select[id^="booth_type"]){ min-width:200px; }

@media (max-width:767px){
    .wesel:has(select[id^="booth_type"]),
    .wesel:has(select[id^="event_type"]){ min-width:140px; }
    td:has(select[id^="booth_type"]){ min-width:0; }
}

/* ==================================================================
   Entry tables on a phone
   ------------------------------------------------------------------
   The client could not see the Price column: these tables are four
   columns wide and a phone shows about two of them, so the rest sat
   off to the side behind a sideways scroll. Nobody scrolls a form
   sideways to find the field they are meant to fill in.

   On a narrow screen each row becomes a small card instead, one
   field per line with its heading beside it, so every field is in
   front of the person filling it in. The column headings are hidden
   because each line now carries its own, written here rather than in
   the markup so the rows the add-row script builds are covered too.
   ================================================================== */

@media (max-width:767px){

    #table-data1, #table-data2, #table-data4{
        display:block; width:100%; overflow:visible;
        border:0; margin-bottom:6px;
    }
    #table-data1 > tbody, #table-data2 > tbody, #table-data4 > tbody{ display:block; }

    /* the heading row - each line carries its own heading now */
    #table-data1 > tbody > tr:first-child,
    #table-data2 > tbody > tr:first-child,
    #table-data4 > tbody > tr:first-child{ display:none; }

    #table-data1 > tbody > tr,
    #table-data2 > tbody > tr,
    #table-data4 > tbody > tr{
        display:block;
        border:1px solid var(--we-line);
        border-radius:10px;
        background:#fff;
        padding:6px 14px;
        margin:0 0 12px 0;
    }

    #table-data1 > tbody > tr > td,
    #table-data2 > tbody > tr > td,
    #table-data4 > tbody > tr > td{
        display:flex; align-items:center; gap:12px;
        width:auto !important; max-width:none;
        border:0; border-bottom:1px solid var(--we-cream-deep);
        padding:10px 0;
    }
    #table-data1 > tbody > tr > td:last-child,
    #table-data2 > tbody > tr > td:last-child,
    #table-data4 > tbody > tr > td:last-child{ border-bottom:0; }

    /* the heading for each line */
    #table-data1 > tbody > tr > td::before,
    #table-data2 > tbody > tr > td::before,
    #table-data4 > tbody > tr > td::before{
        flex:0 0 96px;
        font-family:Barlow, -apple-system, system-ui, sans-serif;
        font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
        color:var(--we-ink-soft);
    }

    #table-data1 > tbody > tr > td:nth-child(1)::before{ content:"Table"; }
    #table-data1 > tbody > tr > td:nth-child(2)::before{ content:"Brand"; }
    #table-data1 > tbody > tr > td:nth-child(3)::before{ content:"Type"; }
    #table-data1 > tbody > tr > td:nth-child(4)::before{ content:"Price ($)"; }

    #table-data2 > tbody > tr > td:nth-child(1)::before{ content:"Speaker"; }
    #table-data2 > tbody > tr > td:nth-child(2)::before{ content:"Class"; }
    #table-data2 > tbody > tr > td:nth-child(3)::before{ content:"Price ($)"; }

    #table-data4 > tbody > tr > td:nth-child(1)::before{ content:"Description"; }
    #table-data4 > tbody > tr > td:nth-child(2)::before{ content:"Other info"; }
    #table-data4 > tbody > tr > td:nth-child(3)::before{ content:"Price ($)"; }

    /* the field itself takes the rest of the line */
    #table-data1 > tbody > tr > td > *,
    #table-data2 > tbody > tr > td > *,
    #table-data4 > tbody > tr > td > *{ flex:1 1 auto; min-width:0; }

    #table-data1 > tbody > tr > td .form-group,
    #table-data2 > tbody > tr > td .form-group,
    #table-data4 > tbody > tr > td .form-group{ margin:0; }

    #table-data1 > tbody > tr > td [class*="col-md-"],
    #table-data2 > tbody > tr > td [class*="col-md-"],
    #table-data4 > tbody > tr > td [class*="col-md-"]{
        width:100%; padding-left:0; padding-right:0; float:none;
    }

    /* the dropdown can use the whole line here */
    #table-data1 .wesel:has(select[id^="booth_type"]){ min-width:0; width:100%; }
}