/* ======================================================

   KIOSK CSS (STRICTLY SCOPED — SAFE)

   Applies ONLY inside .pony-dc-kiosk wrapper

   ====================================================== */

   /* =========================================================
   🔒 KIOSK HARD SHELL LOCK (NO THEME BLEED)
   ========================================================= */

/* ONLY apply when kiosk OR screensaver */
body.pony-kiosk-active,
body.pony-kiosk-screensaver {

    overflow: hidden !important;
}

/* 🔥 KILL ALL THEME UI */
/* 🔥 KILL ONLY NAV (KEEP TITLE/HERO) */

body.pony-kiosk-active nav,
body.pony-kiosk-active .menu,
body.pony-kiosk-active .navbar,
body.pony-kiosk-active .main-navigation,

body.pony-kiosk-screensaver nav,
body.pony-kiosk-screensaver .menu,
body.pony-kiosk-screensaver .navbar,
body.pony-kiosk-screensaver .main-navigation {
    display: none !important;
}

body.pony-kiosk-screensaver nav,
body.pony-kiosk-screensaver .main-navigation,
body.pony-kiosk-screensaver .menu,
body.pony-kiosk-screensaver .navbar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 🔥 FORCE FULLSCREEN */
body.pony-kiosk-active #page,
body.pony-kiosk-screensaver #page {
    margin: 0 !important;
    padding: 0 !important;
}

/* 🔥 KIOSK ROOT ALWAYS FULL */
#pony-kiosk-root,
.pony-kiosk-screen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
}


/* =====================================

   KIOSK — THEME CONTAINER KILL SWITCH

   ===================================== */



body.pony-kiosk .content_wrap,

body.pony-kiosk .content,

body.pony-kiosk .page_content_wrap,

body.pony-kiosk .page_content,

body.pony-kiosk .content_container {



    padding:0 !important;

    margin:0 !important;

}



/* Some themes apply vertical padding here */

body.pony-kiosk .content,

body.pony-kiosk .sidebar,

body.pony-kiosk .sidebar_inner {



    padding-top:0 !important;

    padding-bottom:0 !important;

}



/* Prevent narrow layout */

body.pony-kiosk .content_wrap {



    max-width:100% !important;

}



/* Remove phantom spacing */

body.pony-kiosk article,

body.pony-kiosk .post_content {



    margin:0 !important;

    padding:0 !important;

}



/* ------------------------------------------------------

   PAGE BASE (kiosk only)

------------------------------------------------------ */

.pony-dc-kiosk {

    background: #f5f7fa;

    padding: 0 !important;

    margin: 0 !important;

}



/* kill theme padding ONLY inside kiosk */

.pony-dc-kiosk .post_content,

.pony-dc-kiosk .content_wrap,

.pony-dc-kiosk .content,

.pony-dc-kiosk article {

    padding-top: 0 !important;

    margin-top: 0 !important;

}



/* ------------------------------------------------------

   KIOSK CARD SHELL

------------------------------------------------------ */

.pony-dc-kiosk .pony-dc-kiosk-grid {

    max-width: 1100px;

    margin: 0 auto;

    background: #fff;

    border-radius: 16px;

    border: 1px solid #e3e6ea;

    box-shadow: 0 8px 28px rgba(0,0,0,0.08);

    padding: 24px 32px 40px;

}



/* ------------------------------------------------------

   REMOVE GHOST WHITE SPACE ABOVE CARD

------------------------------------------------------ */

.pony-dc-kiosk h1,

.pony-dc-kiosk h2:first-child,

.pony-dc-kiosk .pony-dc-visitor-title {

    margin-top: 0 !important;

}



.pony-dc-kiosk > p:first-child,

.pony-dc-kiosk article > p:first-child {

    display: none !important;

}



/* ------------------------------------------------------

   COLUMNS

------------------------------------------------------ */

.pony-dc-kiosk-left,

.pony-dc-kiosk-right {

    flex: 1;

    min-width: 0;

}



/* ------------------------------------------------------

   TYPE GRID

------------------------------------------------------ */

.pony-dc-type-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

}



/* ------------------------------------------------------

   TYPE OPTION

------------------------------------------------------ */

.pony-dc-type-option {

    display: flex;

    align-items: center;

    min-height: 46px;

    padding: 8px 10px;

    border: 1px solid #d9d9d9;

    border-radius: 16px;

    background: #fff;

    box-sizing: border-box;

}



.pony-dc-type-option span {

    font-weight: 600;

    color: #222;

    text-align: center;

}



/* ------------------------------------------------------

   RIGHT PANEL CARD LIST

------------------------------------------------------ */

.pony-dc-card-list {

    display: flex;

    flex-direction: column;

    gap: 14px;

}



.pony-dc-card {

    padding: 12px;

    border: 1px solid #e5e5e5;

    border-radius: 12px;

    background: #fff;

    box-shadow: 0 1px 3px rgba(0,0,0,.08);

}



/* ------------------------------------------------------

   IMPORTANT: DO NOT TOUCH THEME HEADER

------------------------------------------------------ */

/* 🚫 NO header, body, site-header, or global selectors */

/* 🚫 kiosk CSS is now 100% isolated */



/* ==========================================
   Normalize kiosk panel titles (TAG-AGNOSTIC)
   ========================================== */

/* Match BOTH titles even if markup uses h1/h2/h3 */
.pony-dc-kiosk .pony-dc-visitor-title,
.pony-dc-kiosk .pony-dc-kiosk-right-title,
.pony-dc-kiosk h1.pony-dc-visitor-title,
.pony-dc-kiosk h2.pony-dc-visitor-title,
.pony-dc-kiosk h3.pony-dc-visitor-title,
.pony-dc-kiosk h1.pony-dc-kiosk-right-title,
.pony-dc-kiosk h2.pony-dc-kiosk-right-title,
.pony-dc-kiosk h3.pony-dc-kiosk-right-title {
    font-size: 38px;
    line-height: 1.2;
    font-weight: 800;
    margin-top: 0 !important;
    margin-bottom: 14px;
}

/* Keep right title from wrapping */
.pony-dc-kiosk .pony-dc-kiosk-right-title {
    white-space: nowrap;
}

/* Ensure the right column doesn't start lower than the left */
.pony-dc-kiosk .pony-dc-kiosk-right {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.pony-dc-kiosk .pony-dc-kiosk-right > *:first-child {
    margin-top: 0 !important;
}


/* Right panel slightly smaller so it never wraps */

.pony-dc-kiosk h2.pony-dc-kiosk-right-title {

    font-size: 38px;

    white-space: nowrap;

}



/* Prevent scroll or accidental interaction */

body.pony-kiosk-screensaver.is-home-screensaver {

    overflow: hidden !important;

}



/* ======================================================

   SCREENSAVER LOCKDOWN (MENUS ONLY)

   ====================================================== */



body.pony-kiosk-screensaver.is-home-screensaver header,

body.pony-kiosk-screensaver.is-home-screensaver nav,

body.pony-kiosk-screensaver.is-home-screensaver .menu_main_wrap,

body.pony-kiosk-screensaver.is-home-screensaver .menu_mobile,

body.pony-kiosk-screensaver.is-home-screensaver .top_panel_fixed,

body.pony-kiosk-screensaver.is-home-screensaver .sc_layouts_menu {

    display: none !important;

}

/* ======================================================

   FORCE PAGE HEADER BACK ON (theme-safe)

   ====================================================== */



body.pony-kiosk-screensaver.is-home-screensaver .page-header,

body.pony-kiosk-screensaver.is-home-screensaver .post_header,

body.pony-kiosk-screensaver.is-home-screensaver .top_panel_title,

body.pony-kiosk-screensaver.is-home-screensaver .sc_layouts_title {

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

}



/* ======================================================

   SCREENSAVER LOCKDOWN (HOME PAGE ONLY)

   ====================================================== */



body.pony-kiosk-screensaver.is-home-screensaver header,

body.pony-kiosk-screensaver.is-home-screensaver nav,

body.pony-kiosk-screensaver.is-home-screensaver .top_panel,

body.pony-kiosk-screensaver.is-home-screensaver .menu_main_wrap,

body.pony-kiosk-screensaver.is-home-screensaver .menu_mobile {

    display: none !important;

}



/* ======================================================

   SCREENSAVER BRAND MARK (TOP-CENTER BAND)

   ====================================================== */



body.is-home-screensaver::before {

    content: "Pony Express Warehousing";



    position: fixed;



    /* ⬇️ move into red box area */

    top: 150px;

    left: 30%;

    transform: translateX(-50%);



    font-size: 40px;

    font-weight: 900;

    letter-spacing: 1px;

    



    color: #000;



    /* gloss black effect */

    text-shadow:

        0 1px 0 rgba(255,255,255,0.35),

        0 3px 6px rgba(0,0,0,0.45);



    z-index: 999999;

    pointer-events: none;

    white-space: nowrap;

}



/* ========================================

   PONY DASHCLOCK — KIOSK MESSAGE HARDENING

   Safe visual layer — zero functional risk

   ======================================== */



.pony-dc-success,

.pony-dc-error {



    display:block;

    width:100%;



    padding:18px 22px;

    margin:14px 0;



    font-size:20px;

    font-weight:700;



    border-radius:8px;



    box-shadow:0 6px 14px rgba(0,0,0,.15);

}



/* SUCCESS — warehouse visible */

.pony-dc-success {



    background:#ffe066 !important;

    border-left:10px solid #f59f00 !important;

    color:#1f2937 !important;

}



/* ERROR — unmistakable */

.pony-dc-error {



    background:#ffd6d6 !important;

    border-left:10px solid #dc2626 !important;

    color:#111827 !important;

}



.pony-kiosk .site-content {

    padding-top: 0 !important;

}



/* ================================

   KIOSK TOP COMPRESSION

   Moves kiosk into visual priority

   ================================ */



.pony-kiosk .site-content,

.pony-kiosk .content-area,

.pony-kiosk .entry-content,

.pony-kiosk .page-content {



    padding-top: 10px !important;

    margin-top: 0 !important;

}



/* FULL PAGE KIOSK TAKEOVER */

body.pony-kiosk {



    background:#f4f7fb;

}



/* Kill theme wrappers */

.pony-kiosk .site,

.pony-kiosk .site-content,

.pony-kiosk .content-area,

.pony-kiosk .wrap,

.pony-kiosk .container {



    max-width:100% !important;

    padding:0 !important;

    margin:0 !important;

}



/* Remove top spacing */

.pony-kiosk .site-content {



    padding-top:0 !important;

}



/* Force DashClock to own viewport */

.pony-kiosk .pony-dc-wrapper {



    margin-top:0 !important;

    padding-top:20px;

}



/* Control kiosk width */

.pony-kiosk .pony-dc-wrapper{

    width:100%;

    max-width:1200px;

    margin:40px auto;

}



/* =====================================

   HARD CENTER — FINAL LAYER

   (Safe. Does not affect admin or theme.)

===================================== */



body.pony-kiosk .pony-dc-wrapper,

body.pony-kiosk .pony-dc-visitor-wrapper {

    width:100%;

    max-width:1200px;

    margin:40px auto !important;

}



/* ======================================

   SINGLE WRAPPER CENTER (CORRECT METHOD)

====================================== */



body.pony-kiosk .pony-dc-visitor-wrapper{



    max-width:1200px;

    margin:40px auto !important;



}



/* =====================================

   TRUE CENTER — SAFE METHOD

   ===================================== */



body.pony-kiosk .pony-dc-visitor-wrapper{



    max-width:1200px;

    width:92%;



    margin-left:auto !important;

    margin-right:auto !important;

}



/* BREAK THEME WIDTH LOCK */



body.pony-kiosk .container{

    max-width:100% !important;

    width:100% !important;

}





/* NUCLEAR WIDTH RELEASE — KIOSK ONLY */



body.pony-kiosk main{

    max-width:100% !important;

    width:100% !important;

    padding:0 !important;

    margin:0 !important;

}



/* HARD KIOSK LOCK */



body.pony-kiosk header,

body.pony-kiosk nav{

    display:none !important;

}



/* =====================================

   TRUE KIOSK CENTER — FINAL

   ===================================== */



body.pony-kiosk main{



    place-items:center !important;



}



/* control kiosk width */

body.pony-kiosk .pony-dc-visitor-wrapper{



    width:1100px;

    max-width:85vw;



}

/* =========================================
   FIX: Align Current Visitors to top
   Enterprise-safe, additive only
========================================= */

.pony-dc-visitor-layout,
.pony-dc-visitor-grid,
.pony-dc-visitor-columns {

    align-items: flex-start !important;

}

/* Ensure right column starts at top */
.pony-dc-current-visitors {

    margin-top: 0 !important;
    padding-top: 0 !important;

}

.pony-dc-visitor-layout > div {
    align-self: flex-start !important;
}

/* =========================================
   FIX: Force Current Visitors column to top
   Pony DashClock Kiosk Layout Correction
========================================= */

/* Target main kiosk row/container */
.pony-dc-kiosk-template .row,
.pony-dc-kiosk-template .container,
.pony-dc-kiosk-template .pony-dc-layout,
.pony-dc-kiosk-template .pony-dc-grid {

    align-items: flex-start !important;
    vertical-align: top !important;

}

/* Target right column directly */
.pony-dc-kiosk-template .pony-dc-current-visitors,
.pony-dc-kiosk-template .current-visitors,
.pony-dc-kiosk-template .visitor-current {

    margin-top: 0 !important;
    padding-top: 0 !important;
    align-self: flex-start !important;
    justify-content: flex-start !important;

}

/* Prevent vertical centering from flex column layouts */
.pony-dc-kiosk-template .pony-dc-current-visitors,
.pony-dc-kiosk-template .current-visitors {

    display: block !important;

}

/* Remove automatic centering caused by height rules */
.pony-dc-kiosk-template .row > div {

    margin-top: 0 !important;
    align-self: flex-start !important;

}

/* =====================================================
   PONY DASHCLOCK — KIOSK POSITION STABILIZATION
   SAFE ADDITIVE BLOCK — DO NOT REMOVE EXISTING RULES
   ===================================================== */

/* Stabilize viewport */
body.pony-kiosk {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;   /* vertical center */
    align-items: center;       /* horizontal center */

    margin: 0 !important;

    padding: 20px !important;

    box-sizing: border-box;

}



/* Neutralize theme layout containers */
body.pony-kiosk .site,
body.pony-kiosk .site-content,
body.pony-kiosk .content-area,
body.pony-kiosk .entry-content {

    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 !important;
    padding: 0 !important;

}


/* Stabilize kiosk container itself */
body.pony-kiosk .pony-dc-kiosk,
body.pony-kiosk .pony-dc-container,
body.pony-kiosk .pony-dc-card {

    margin-left: auto !important;
    margin-right: auto !important;

    position: relative;

}


/* iPad Safari viewport correction */
@supports (-webkit-touch-callout: none) {

    body.pony-kiosk {

        min-height: -webkit-fill-available;

        display: flex;

        justify-content: center;
        align-items: center;

        padding: 20px !important;

    }

}

/* =====================================================
   PONY DASHCLOCK — RESPONSIVE KIOSK VIEWPORT AUTHORITY
   Tablet-first positioning, sizing, and orientation.
   ===================================================== */

body.pony-kiosk {
    min-height: 100vh;
    min-height: 100dvh;
    display: block !important;
    margin: 0 !important;
    padding: max(16px, env(safe-area-inset-top))
             max(16px, env(safe-area-inset-right))
             max(20px, env(safe-area-inset-bottom))
             max(16px, env(safe-area-inset-left)) !important;
    box-sizing: border-box;
    overflow-x: hidden;
}

body.pony-kiosk .site,
body.pony-kiosk .site-content,
body.pony-kiosk .content-area,
body.pony-kiosk .entry-content,
body.pony-kiosk .page-content {
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.pony-kiosk .pony-dc-wrapper,
body.pony-kiosk .pony-dc-visitor-wrapper,
body.pony-kiosk .pony-dc-kiosk,
body.pony-kiosk .pony-dc-container,
body.pony-kiosk .pony-dc-card {
    width: min(100%, 1200px) !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    box-sizing: border-box;
}

body.pony-kiosk .pony-dc-kiosk-grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: clamp(20px, 3vw, 40px) !important;
    width: 100%;
    box-sizing: border-box;
}

body.pony-kiosk .pony-dc-kiosk-left {
    flex: 1 1 56%;
    min-width: 0;
}

body.pony-kiosk .pony-dc-kiosk-right {
    flex: 1 1 44%;
    min-width: 0;
    align-self: flex-start !important;
}

body.pony-kiosk input,
body.pony-kiosk select,
body.pony-kiosk textarea,
body.pony-kiosk button,
body.pony-kiosk .pony-dc-type-option {
    min-height: 48px;
    font-size: 16px;
    touch-action: manipulation;
}

body.pony-kiosk input,
body.pony-kiosk select,
body.pony-kiosk textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@supports (-webkit-touch-callout: none) {
    body.pony-kiosk {
        min-height: -webkit-fill-available;
        display: block !important;
        padding-top: max(16px, env(safe-area-inset-top)) !important;
    }
}

@media (max-width: 980px), (orientation: portrait) {
    body.pony-kiosk {
        padding: max(12px, env(safe-area-inset-top))
                 max(12px, env(safe-area-inset-right))
                 max(20px, env(safe-area-inset-bottom))
                 max(12px, env(safe-area-inset-left)) !important;
    }

    body.pony-kiosk .pony-dc-wrapper,
    body.pony-kiosk .pony-dc-visitor-wrapper,
    body.pony-kiosk .pony-dc-kiosk,
    body.pony-kiosk .pony-dc-container,
    body.pony-kiosk .pony-dc-card {
        width: 100% !important;
        max-width: 760px !important;
    }

    body.pony-kiosk .pony-dc-kiosk-grid {
        flex-direction: column !important;
        gap: 24px !important;
    }

    body.pony-kiosk .pony-dc-kiosk-left,
    body.pony-kiosk .pony-dc-kiosk-right {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    body.pony-kiosk .pony-dc-type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.pony-kiosk .pony-dc-visitor-title,
    body.pony-kiosk .pony-dc-kiosk-right-title {
        font-size: clamp(28px, 6vw, 38px) !important;
        white-space: normal !important;
    }
}

@media (max-width: 560px) {
    body.pony-kiosk .pony-dc-kiosk-grid {
        padding: 18px 16px 28px !important;
    }

    body.pony-kiosk .pony-dc-type-grid {
        grid-template-columns: 1fr !important;
    }

    body.pony-kiosk .pony-dc-type-option {
        min-height: 52px;
    }
}

/* =====================================================
   PONY DASHCLOCK — KIOSK CARD WIDTH EXPANSION
   Safe additive override
   ===================================================== */

body.pony-kiosk .pony-dc-kiosk,
body.pony-kiosk .pony-dc-container,
body.pony-kiosk .pony-dc-card {

    width: 96% !important;
    max-width: 900px !important;

}

/* =====================================================
   FIX RIGHT COLUMN VISITOR LIST VERTICAL POSITION
   Targets the actual container from pony-dc-visitor.php
   ===================================================== */

body.pony-kiosk .pony-dc-visitor-occupancy {

    display: block !important;

    margin-top: 0 !important;
    padding-top: 0 !important;

    align-self: flex-start !important;

}


body.pony-kiosk .pony-dc-card-list {

    margin-top: 0 !important;
    padding-top: 0 !important;

}

/* =====================================================
   FIX RIGHT COLUMN GRID ALIGNMENT (ACTUAL ROOT CAUSE)
   Forces both columns to align at the top
   ===================================================== */

body.pony-kiosk .pony-dc-kiosk-grid {

    align-items: start !important;

}

body.pony-kiosk .pony-dc-kiosk-grid > div {

    align-self: start !important;

}
/* =====================================================
   FORCE RIGHT COLUMN TO TOP ALIGN (ACTUAL FIX)
   ===================================================== */

body.pony-kiosk .pony-dc-kiosk-right {

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;

}

body.pony-kiosk .pony-dc-visitor-occupancy {

    margin-top: 0 !important;
}

/* =====================================================
   TRUE GRID FIX — FORCE TOP ALIGNMENT OF BOTH COLUMNS
   ===================================================== */

body.pony-kiosk .pony-dc-kiosk-grid {

    display: grid !important;

    align-items: start !important;

}
body.pony-kiosk .pony-dc-kiosk-grid {

    display: flex !important;

    align-items: flex-start !important;

}

/* =====================================================
   HARD ANCHOR RIGHT COLUMN CONTENT TO TOP OF GRID CELL
   ===================================================== */

body.pony-kiosk .pony-dc-visitor-occupancy {

    position: relative !important;
    top: 0 !important;

    transform: none !important;

    margin-top: 0 !important;
    padding-top: 0 !important;

}

body.pony-kiosk .pony-dc-card-list {

    position: relative !important;
    top: 0 !important;

}

/* =====================================================
   REMOVE INTERNAL SPACING BETWEEN HEADING AND CARD LIST
   ===================================================== */

body.pony-kiosk .pony-dc-kiosk-right-title {

    margin-bottom: 4px !important;

}

body.pony-kiosk .pony-dc-card-list {

    margin-top: 0 !important;

}

body.pony-kiosk .pony-dc-card {

    margin-top: 4px !important;

}

/* =====================================================
   ALIGN CHECKOUT BUTTON INLINE WITH VISITOR NAME
   ===================================================== */

body.pony-kiosk .pony-dc-card {

    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;

}


/* Left side content (name, meta, reason) */
body.pony-kiosk .pony-dc-card-main {

    display: flex !important;
    flex-direction: column !important;

}


/* Right side button container */
body.pony-kiosk .pony-dc-card-actions {

    display: flex !important;
    align-items: center !important;

    margin-left: 15px !important;

}


/* Optional: prevent button from stretching */
body.pony-kiosk .pony-dc-checkout-toggle {

    white-space: nowrap;

}

/* =====================================================
   STACK VISITOR TYPE, DATE/TIME, AND REASON VERTICALLY
   Enterprise-stable, collapsed-card safe
   ===================================================== */

body.pony-kiosk .pony-dc-card-meta {

    display: block !important;
    line-height: 1.4 !important;

}

/* visitor type line */
body.pony-kiosk .pony-dc-card-meta .pony-dc-pill {

    display: block !important;
    margin-bottom: 2px !important;

}

/* date/time line */
body.pony-kiosk .pony-dc-card-meta .pony-dc-card-time {

    display: block !important;
    margin-bottom: 2px !important;

}

/* reason line */
body.pony-kiosk .pony-dc-card-notes {

    display: block !important;
    margin-top: 4px !important;

}

/* =====================================================
   EXPANDED CARD — FORCE SINGLE COLUMN STACK (AUTHORITATIVE)
   Keeps collapsed title-row flex working, but prevents the
   expanded two-column split.
   ===================================================== */

/* 1) Hide the Check Out toggle once expanded */
body.pony-kiosk .pony-dc-card.expanded .pony-dc-checkout-toggle {
    display: none !important;
}

/* 2) Expanded state: card MUST be block/stack */
body.pony-kiosk .pony-dc-card.expanded {
    display: block !important;
}

/* 3) Expanded: undo any flex/grid that creates columns */
body.pony-kiosk .pony-dc-card.expanded .pony-dc-card-main,
body.pony-kiosk .pony-dc-card.expanded .pony-dc-card-actions,
body.pony-kiosk .pony-dc-card.expanded .pony-dc-visitor-checkout-form {
    display: block !important;
    width: 100% !important;
    float: none !important;
    max-width: 100% !important;
}

/* 4) Expanded: make all fields full width */
body.pony-kiosk .pony-dc-card.expanded .pony-dc-visitor-checkout-form textarea,
body.pony-kiosk .pony-dc-card.expanded .pony-dc-visitor-checkout-form input,
body.pony-kiosk .pony-dc-card.expanded .pony-dc-visitor-checkout-form canvas,
body.pony-kiosk .pony-dc-card.expanded .pony-dc-visitor-checkout-form .signature-pad {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 5) Expanded: buttons row at bottom */
body.pony-kiosk .pony-dc-card.expanded .pony-dc-sign-actions {
    display: flex !important;
    gap: 12px !important;
    justify-content: space-between !important;
    margin-top: 12px !important;
}

body.pony-kiosk .pony-dc-card.expanded .pony-dc-sign-actions button {
    flex: 1 1 auto !important;
}

/* =====================================================
   EXPANDED CARD — FORCE SINGLE COLUMN STACK
   (only when JS adds .pony-card-expanded)
   ===================================================== */

body.pony-kiosk .pony-dc-card.pony-card-expanded {
  display: block !important;
}

body.pony-kiosk .pony-dc-card.pony-card-expanded .pony-dc-card-main,
body.pony-kiosk .pony-dc-card.pony-card-expanded .pony-dc-card-actions,
body.pony-kiosk .pony-dc-card.pony-card-expanded .pony-dc-visitor-checkout-form {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
}

/* Hide the CHECK OUT button once expanded */
body.pony-kiosk .pony-dc-card.pony-card-expanded .pony-dc-checkout-toggle {
  display: none !important;
}

/* Full width fields */
body.pony-kiosk .pony-dc-card.pony-card-expanded textarea,
body.pony-kiosk .pony-dc-card.pony-card-expanded input,
body.pony-kiosk .pony-dc-card.pony-card-expanded canvas,
body.pony-kiosk .pony-dc-card.pony-card-expanded .signature-pad {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Bottom button row */
body.pony-kiosk .pony-dc-card.pony-card-expanded .pony-dc-sign-actions {
  display: flex !important;
  gap: 12px !important;
  justify-content: space-between !important;
  margin-top: 12px !important;
}

body.pony-kiosk .pony-dc-card.pony-card-expanded .pony-dc-sign-actions button {
  flex: 1 1 auto !important;
}
/* =====================================================
   COLLAPSED STATE — Name left, CHECK OUT right
   ===================================================== */

body.pony-kiosk .pony-dc-card-main {

    display: flex !important;
    flex-direction: column !important;
    position: relative !important;

}

/* Make title row flex so button can sit right */
body.pony-kiosk .pony-dc-card-title {

    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;

}

/* Position CHECK OUT button to right */
body.pony-kiosk .pony-dc-checkout-toggle {

    margin-left: auto !important;
}


/* =====================================================
   EXPANDED STATE — hide CHECK OUT button and stack form
   ===================================================== */

body.pony-kiosk .pony-dc-card.open .pony-dc-checkout-toggle {

    display: none !important;

}

/* Force full-width stacked layout */
body.pony-kiosk .pony-dc-card.open .pony-dc-card-main,
body.pony-kiosk .pony-dc-card.open .pony-dc-card-actions {

    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;

}

/* Full width fields */
body.pony-kiosk .pony-dc-card.open textarea,
body.pony-kiosk .pony-dc-card.open canvas {

    width: 100% !important;
    max-width: 100% !important;

}

/* Button row */
body.pony-kiosk .pony-dc-card.open .pony-dc-sign-actions {

    display: flex !important;
    gap: 12px !important;
    margin-top: 12px !important;

}
/* =====================================================
   VISITOR CARD: COLLAPSED = text left, button right
   OPEN = stacked, button hidden
   Requires JS class: .pony-dc-card-open
   ===================================================== */

/* COLLAPSED layout */
body.pony-kiosk .pony-dc-card:not(.pony-dc-card-open) {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

body.pony-kiosk .pony-dc-card:not(.pony-dc-card-open) .pony-dc-card-main {
  flex: 1 1 auto !important;
}

body.pony-kiosk .pony-dc-card:not(.pony-dc-card-open) .pony-dc-card-actions {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
}

/* OPEN layout (expanded) */
body.pony-kiosk .pony-dc-card.pony-dc-card-open {
  display: block !important;
}

body.pony-kiosk .pony-dc-card.pony-dc-card-open .pony-dc-card-main,
body.pony-kiosk .pony-dc-card.pony-dc-card-open .pony-dc-card-actions,
body.pony-kiosk .pony-dc-card.pony-dc-card-open .pony-dc-visitor-checkout-form,
body.pony-kiosk .pony-dc-card.pony-dc-card-open .pony-dc-checkout-panel {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
}

/* Hide CHECK OUT button once open */
body.pony-kiosk .pony-dc-card.pony-dc-card-open .pony-dc-checkout-toggle {
  display: none !important;
}

/* Full width fields */
body.pony-kiosk .pony-dc-card.pony-dc-card-open textarea,
body.pony-kiosk .pony-dc-card.pony-dc-card-open canvas {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* =====================================================
   NORMALIZE AND RIGHT-ALIGN CLEAR / SIGN OUT BUTTONS
   Expanded visitor checkout state
   ===================================================== */

body.pony-kiosk .pony-dc-card.pony-dc-card-open .pony-dc-sign-actions {

    display: flex !important;
    justify-content: flex-end !important;  /* move buttons to right */
    align-items: center !important;

    gap: 12px !important;
    margin-top: 14px !important;

}

/* normalize button sizing */
body.pony-kiosk .pony-dc-card.pony-dc-card-open .pony-dc-sign-actions button {

    min-width: 120px !important;
    height: 42px !important;

    padding: 0 18px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

}

/* =====================================================
   EXPANDED CARD CONTAINER WIDTH + PADDING NORMALIZATION
   Ensures comment and signature stay inside card border
   ===================================================== */

/* Expand card padding slightly */
body.pony-kiosk .pony-dc-card.pony-dc-card-open {

    padding: 18px 20px 20px 20px !important;

    box-sizing: border-box !important;

}

/* Ensure checkout panel does not overflow card */
body.pony-kiosk .pony-dc-card.pony-dc-card-open .pony-dc-checkout-panel {

    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

}

/* Normalize textarea */
body.pony-kiosk .pony-dc-card.pony-dc-card-open textarea {

    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

}

/* Normalize signature canvas */
body.pony-kiosk .pony-dc-card.pony-dc-card-open canvas {

    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

}

body:not(.WAKE_CLASS) nav a {
    opacity: 0.5;
    cursor: default !important;
    pointer-events: none !important;
}

body:not(.WAKE_CLASS) nav li:hover > ul {
    display: none !important;
}

/* =====================================================
   FORM FIELD WIDTH FIX — MATCH NAME TO REASON FIELD
   Safe additive (no side effects)
   ===================================================== */

body.pony-kiosk .pony-dc-name-field,
body.pony-kiosk .pony-dc-reason {

    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;

}

/* Remove any paragraph width restriction */
body.pony-kiosk .pony-dc-visitor-form p {

    max-width: 100% !important;

}

/* =========================================
   AUTOCOMPLETE DROPDOWN (KIOSK SAFE)
========================================= */

.pony-dc-autocomplete {
    position: relative;
    max-width: 100%;
}

.pony-dc-autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;

    max-height: 220px;
    overflow-y: auto;

    z-index: 9999;
}

.pony-dc-autocomplete-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 16px;
}

.pony-dc-autocomplete-item:hover {
    background: #f1f5f9;
}

/* =====================================================
   FIX: Name field underline + spacing cleanup
   Safe kiosk-only override
   ===================================================== */

/* Remove any rogue border/line under autocomplete */
body.pony-kiosk .pony-dc-autocomplete {
    border: none !important;
    box-shadow: none !important;
}

/* Ensure input itself has correct styling */
body.pony-kiosk .pony-dc-name-field {
    display: block;
    border: 1px solid #d9d9d9 !important;
    border-radius: 12px;
}

/* 🔧 Reduce spacing between label and field */
body.pony-kiosk .pony-dc-visitor-form p {
    margin-bottom: 10px !important;
}

/* 🔧 Tighten specifically the label → input gap */
body.pony-kiosk label {
    display: block;
    margin-bottom: 4px !important;
}

body.pony-kiosk .pony-dc-name-field {
    height: 44px;
    padding: 8px 12px;
}

/* Hide autocomplete list when empty */
body.pony-kiosk .pony-dc-autocomplete-list:empty {
    display: none !important;
}

body.pony-kiosk .pony-dc-autocomplete-list {
    border: 1px solid #ccc;
    border-top: none; /* 🔥 removes the "line under input" */
    margin-top: 2px;
}

/* =====================================================
   HEADER LINE — FACILITY + ADDRESS INLINE
   ===================================================== */

body.pony-kiosk .pony-dc-meta-line {
    font-size: 14px;
    color: #555;
}

body.pony-kiosk .pony-dc-facility-address-inline {
    margin-left: 12px;
    color: #555;
}

/* =====================================================
   FOOTER — WEBSITE BOTTOM RIGHT
   ===================================================== */

body.pony-kiosk .pony-dc-kiosk-footer {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 13px;
}

body.pony-kiosk .pony-dc-kiosk-footer a {
    color: #000;
    text-decoration: none;
}

/* Facility + address inline */
body.pony-kiosk .pony-dc-meta-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; /* prevents overflow */
}

body.pony-kiosk .pony-dc-facility-address-inline {
    font-size: 13px;
    color: #555;
}

/* =====================================================
   FINAL KIOSK TYPE CARD AUTHORITY
   Compact, centered, kiosk-only
   ===================================================== */

body.pony-kiosk .pony-dc-type-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 116px) !important;
    justify-content: start !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin: 6px 0 10px !important;
}

body.pony-kiosk .pony-dc-type-option {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;

    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    min-height: 64px !important;
    padding: 5px 4px !important;

    border: 1px solid #d9d9d9 !important;
    border-radius: 10px !important;
    background: #ffffff !important;

    box-sizing: border-box !important;
    cursor: pointer;
    text-align: center !important;
}

body.pony-kiosk .pony-dc-type-option input[type="radio"] {
    appearance: auto !important;
    -webkit-appearance: radio !important;

    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;

    margin: 0 auto !important;
    padding: 0 !important;
    flex: 0 0 17px !important;
}

body.pony-kiosk .pony-dc-type-option span {
    display: block !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 13px !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;

    text-align: center !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

body.pony-kiosk .pony-dc-type-option:hover,
body.pony-kiosk .pony-dc-type-option:focus-within {
    border-color: #8aa8c0 !important;
    background: #f8fbfd !important;
}

body.pony-kiosk .pony-dc-type-option:has(input[type="radio"]:checked) {
    border-color: #2271b1 !important;
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.14) !important;
    background: #f4f9fd !important;
}

@media (max-width: 980px), (orientation: portrait) {
    body.pony-kiosk .pony-dc-type-grid {
        grid-template-columns: repeat(3, 116px) !important;
        justify-content: start !important;
    }

    body.pony-kiosk .pony-dc-type-option {
        width: 116px !important;
        min-width: 116px !important;
        max-width: 116px !important;
        min-height: 64px !important;
        padding: 5px 4px !important;
    }

    body.pony-kiosk .pony-dc-type-option input[type="radio"] {
        width: 17px !important;
        height: 17px !important;
        min-width: 17px !important;
        min-height: 17px !important;
        flex-basis: 17px !important;
    }
}

@media (max-width: 560px) {
    body.pony-kiosk .pony-dc-type-grid {
        grid-template-columns: repeat(2, 108px) !important;
        justify-content: start !important;
        gap: 6px !important;
    }

    body.pony-kiosk .pony-dc-type-option {
        width: 108px !important;
        min-width: 108px !important;
        max-width: 108px !important;
        min-height: 60px !important;
        padding: 4px 3px !important;
    }

    body.pony-kiosk .pony-dc-type-option input[type="radio"] {
        width: 17px !important;
        height: 17px !important;
        min-width: 17px !important;
        min-height: 17px !important;
        flex-basis: 17px !important;
    }

    body.pony-kiosk .pony-dc-type-option span {
        font-size: 12px !important;
    }
}