/* ==========================================================================
   Admit Subscriber Styles
   Merged from the old KU frontend CSS so the Admit Subscriber UI preserves
   the original button, field, and two-column layout styling.
   Keep Admit-specific selectors that are needed by the new class-based module.
   ========================================================================== */

:root {
    --ku-text: #122B46;
    --ku-muted: #6B7280;

    --ku-active-back: #122B46;
    --ku-active-text: #FFFFFF;
    --ku-active-border: #122B46;

    --ku-hover-back: #FFFFFF;
    --ku-hover-text: #122B46;
    --ku-hover-border: #122B46;

    --ku-focus-ink: 101,124,145;

    --ku-error-bg: #FCEEEE;
    --ku-error-text: #122B46;
    --ku-error-border: #841516;

    --ku-success-bg: #D7DECC;
    --ku-warning-bg: #F1D4A9;

    --ku-help-bg: #F8FAFC;
    --ku-help-border: #657C91;
    --ku-help-text: #666677;

    --ku-radius: 10px;
    --ku-gap: 12px;
    --ku-card-border: #E5E7EB;
    --ku-input-border: #CCD0D4;
    --ku-input-bg: #F7F7F7;

    --ku-badge-bg: #A8B691;
    --ku-badge-border: #6A8E22;
    --ku-badge-text: #ffffff;

    --ku-toggle-on: #C5CEB6;
    --ku-toggle-off: #CDA3A5;

    --ku-font-display: "Merienda", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --ku-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.ku {
    color: var(--ku-text);
    font-family: var(--ku-font-display);
}

.ku * {
    box-sizing: border-box;
}

.ku-stack > * + * {
    margin-top: var(--ku-gap);
}

.max-w-680 {
    max-width: 680px;
    margin-inline: auto;
}

/*
   Widened to 1100px and left-indented instead of centered, per
   Dianne's direction (08-2026) - the card's left edge now lines up
   under the accordion title text instead of floating in the middle
   of the panel. The class name still says 900 for historical reasons
   (three tools already reference it: Passport Links, Passports Join
   Log, and the older Links & Codes tool) - renaming it everywhere
   wasn't worth the extra file changes for a cosmetic mismatch.
   The 24px left margin is not arbitrary: the accordion title's own
   padding (12px) plus its +/- icon (22px wide, 2px gap) puts the
   title text 36px from the accordion's left edge, and this content
   area already has 12px of its own padding, so 24px more lines the
   two up exactly (see .ku-dashboard-accordion-title in
   ku-dashboard-visibility-tools.css).
*/
.max-w-900 {
    max-width: 1100px;
    margin-left: 24px;
}

.ku-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ku-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ku-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ku-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ku-center { text-align: center; }

.ku-muted {
    color: var(--ku-muted);
}

.ku-hidden {
    display: none !important;
}

.ku-grid-2 {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr 1fr;
}

.ku-card {
    border: 1px solid var(--ku-card-border);
    border-radius: var(--ku-radius);
    background: #fff;
    padding: 12px;
}

.ku-section {
    padding: 12px;
    border-radius: var(--ku-radius);
    background: #fff;
}


.ku-error {
    background: var(--ku-error-bg);
    color: var(--ku-error-text);
    border: 1px solid #efd0d0;
    border-left: 2px solid var(--ku-error-border);
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: var(--ku-radius);
}

.ku-success {
    background: var(--ku-success-bg);
    color: var(--ku-text);
    border: 1px solid #cfe5c8;
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: var(--ku-radius);
}

.ku-warning {
    background: var(--ku-warning-bg);
    color: var(--ku-text);
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: var(--ku-radius);
}

.ku .ku-help {
    display: block;
    font-size: 14px;
    color: var(--ku-muted);
    font-family: Arial, sans-serif;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.ku .ku-row .ku-help {
    flex: 0 0 100%;
    width: 100%;
    margin-top: 3px;
}

.ku .ku-row + .ku-help {
    margin-top: 6px;
}

.ku h4 + .ku-help {
    margin-top: 6px;
}

.ku .ku-help + .ku-row {
    margin-top: 6px;
}

.ku-helpbox {
    background: var(--ku-help-bg);
    border: 1px solid var(--ku-help-border);
    color: var(--ku-text);
    padding: 12px;
    border-radius: var(--ku-radius);
    margin-bottom: 12px;
}

.ku-helpbox .ku-welcome {
    font-family: "Times New Roman", Times, serif;
    font-size: 17px;
    line-height: 1.5;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 30px !important;
}

.ku-help-accent {
    font-size: 14px;
    color: var(--ku-help-text);
    margin-top: 6px;
    display: block;
}

.ku-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 5px 12px !important;
    font-size: 13px;
    line-height: 1.4;
    border-radius: var(--ku-radius);
    border: 1.5px solid var(--ku-active-border) !important;
    background: var(--ku-active-back) !important;
    color: var(--ku-active-text) !important;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.ku-btn:hover {
    background: var(--ku-hover-back) !important;
    color: var(--ku-hover-text) !important;
    border-color: var(--ku-hover-border) !important;
}

.ku-btn:focus-visible {
    outline: none;
}

.ku-badge {
    display: inline-block;
    padding: 2px 6px !important;
    border-radius: 6px;
    border: 1px solid var(--ku-badge-border);
    font-size: 12px !important;
    font-weight: 700;
    background: var(--ku-badge-bg);
    color: var(--ku-badge-text);
    vertical-align: middle;
    margin-left: 6px;
}

/**
 * Red/gold status modifiers for KU_World_Role_Access_Helper::render_role_label()
 * and KU_Content_Silo_Freeze::render_silo_label() output (Frozen / Scheduled to
 * Freeze). This stylesheet only loads on Admit Subscriber pages (Passport
 * Links, Join Log, Offer Manager), which never load ku-dashboard-accordion.css,
 * so without these the badges rendered plain (--ku-badge-bg) regardless of
 * frozen/scheduled state. Colors match ku-dashboard-accordion.css's
 * .ku-badge-red / .ku-badge-gold. Added 07-04-2026.
 */
.ku-badge.ku-badge-red {
    border-color: #841516 !important;
    background: #841516 !important;
}

.ku-badge.ku-badge-gold {
    border-color: #DD9933 !important;
    background: #DD9933 !important;
}

/**
 * Green badge modifier - added alongside red/gold above so
 * KU_World_Role_Access_Helper::render_role_badge() (used by the Passport
 * Links table's Role column) can show a normal active role as a colored
 * pill too, not just the Frozen/Scheduled exceptions. Matches
 * ku-dashboard-accordion.css's .ku-badge-green. Added 07-11-2026.
 */
.ku-badge.ku-badge-green {
    border-color: #6A8E22 !important;
    background: #A8B691 !important;
}

/**
 * Outline badge modifier - white with navy border/text, for "All
 * Members" (open to everyone), as distinct from the three status
 * colors above. Matches ku-dashboard-accordion.css's .ku-badge-outline.
 * Added 07-11-2026.
 */
.ku-badge.ku-badge-outline {
    border-color: #122B46 !important;
    background: #ffffff !important;
    color: #122B46 !important;
}

/**
 * Light gold / light blue / System Role pill - local copies of
 * ku-dashboard-shared.css's badge modifiers, added 08-25-2026 so the
 * Passport Links, Join Log and Offer Manager tables (which never load
 * ku-dashboard-shared.css - see note above) show World Role and
 * Content Library pills in the current platform-wide colors instead
 * of falling back to this file's older green/plain styling. Keep in
 * sync with ku-dashboard-shared.css's versions by hand if those change.
 */
.ku-badge.ku-badge-lightgold {
    border-color: #DD9933 !important;
    background: #FAEFDA !important;
    color: #122B46 !important;
}

.ku-badge.ku-badge-lightblue {
    border-color: #657C91 !important;
    background: #DFE4E9 !important;
    color: #122B46 !important;
}

.ku-system-role-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid #6A8E22;
    background: #EAF3DE;
    color: #27500A;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.6;
    vertical-align: middle;
}

.ku-input,
.ku-field input[type="text"],
.ku-field input[type="email"],
.ku-field input[type="url"],
.ku-url-row input[type="text"] {
    padding: 10px 12px;
    border: 1px solid var(--ku-input-border);
    border-radius: var(--ku-radius);
    background: var(--ku-input-bg);
    color: var(--ku-text);
    width: 100%;
    max-width: 100%;
}

.ku-input {
    font-family: var(--ku-font-mono);
    font-size: 14px;
}

.ku-field {
    margin-bottom: 10px;
}

.ku-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--ku-text);
}

.ku-field .ku-help {
    font-size: 14px;
    color: var(--ku-muted);
    margin-top: 4px;
}

.elementor-widget-tabs .elementor-tab-title,
.e-n-tabs .e-n-tab-title {
    color: var(--ku-text);
    background: #F3F4F6;
    border-radius: var(--ku-radius);
    border: 1px solid transparent;
}

.elementor-widget-tabs .elementor-tab-title:hover,
.e-n-tabs .e-n-tab-title:hover {
    color: var(--ku-hover-text);
    background: var(--ku-hover-back);
    border-color: var(--ku-hover-border);
}

.elementor-widget-tabs .elementor-tab-title.elementor-active,
.e-n-tabs .e-n-tab-title[aria-selected="true"] {
    background: var(--ku-active-back);
    color: var(--ku-active-text);
}

.elementor-widget-tabs .elementor-tab-title.elementor-active:focus,
.elementor-widget-tabs .elementor-tab-title.elementor-active:focus-visible,
.e-n-tabs .e-n-tab-title[aria-selected="true"]:focus,
.e-n-tabs .e-n-tab-title[aria-selected="true"]:focus-visible {
    color: var(--ku-active-text);
    outline: none;
}

.ku-alc {
    max-width: 900px;
    margin-inline: auto;
}

.ku-alc .ku-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ku-alc .ku-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ku-alc h4 {
    margin: 0 0 10px 0;
    font-size: 16px;
}

/**************************************************************************/
/* Admit Subscriber specific selectors needed by the new module structure */
/**************************************************************************/


/* ==========================================================================
   KU MARK: Admit Header Banner Styles
   Fluid BuddyBoss-style cover sizing for the Admit Subscriber header banner
   ========================================================================== */

/*
   Banner sizing variables
   --------------------------------------------------------------------------
   --ku-banner-ratio:
       BuddyBoss-style cover ratio (width / height)

   --ku-banner-h-fluid:
       Main responsive height used to size the banner container

   You can adjust the clamp() values if you want the banner taller or shorter.
*/

:root {
     --ku-banner-ratio: 5.9;

     /* keep the shorter banner height */
     --ku-banner-scale: 0.6;

     --ku-banner-h-fluid: clamp(
          calc(120px * var(--ku-banner-scale)),
          calc(18vw * var(--ku-banner-scale)),
          calc(225px * var(--ku-banner-scale))
     );
}

/*
   Admit header banner container
   --------------------------------------------------------------------------
   - Height controls the overall footprint
   - Width is calculated from the height and ratio
   - margin: 0 auto centers the banner block
*/

.ku-admit-header-banner {
     width: min(100%, 1000px, calc(var(--ku-banner-h-fluid) * var(--ku-banner-ratio)));
     margin-bottom: 12px;
     overflow: hidden;
     border-radius: 8px;
     aspect-ratio: var(--ku-banner-ratio);
}

/*
   Banner image
   --------------------------------------------------------------------------
   object-fit: cover keeps the BuddyBoss-style crop behavior
*/
.ku-admit-header-banner img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     border-radius: 8px;
}


/* ==========================================================================
   KU MARK: Admit Header Section Layout
   Professional-width centered section for the Admit Header
   ========================================================================== */

/*
   Outer Admit Header section
   --------------------------------------------------------------------------
   - width: 100% allows the section to shrink naturally on small screens
   - max-width controls readability and prevents a stretched layout
   - margin centers the full section on the page
*/

.ku-admit-header-section {
     width: 100%;
     max-width: 960px;
     margin: 0 auto 24px;
}


/*
   Inner Admit Header content
   --------------------------------------------------------------------------
   - keeps all blocks stacked cleanly
   - text-align: left ensures text stays aligned inside the centered section
*/
.ku-admit-header-inner {
     display: flex;
     flex-direction: column;
     gap: 0;
     text-align: left;
}

.ku-text-center {text-align: center;}

.ku-intro {
    margin-top: -10px;
    margin-bottom: 8px;
    font-size: 15px; 
    text-align: center;
} 

.ku-admit-eyebrow {
    margin: 0;
    font-size: 12pt;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ku-admit-header-world {
     margin-bottom: 16px;
}

.ku-admit-world-title,
.ku-admit-header-world .ku-admit-world-title,
h2.ku-admit-world-title {
    margin: 0;
    font-size: 24px;
    color: #122B46 !important;
}

.ku-admit-host-avatar img,
.ku-admit-host-avatar .avatar {
    width: 80px;
    height: 80px;
    border-radius: 7px;
    display: block;
}

.ku-admit-header-host {
    margin-top: 2px;
    margin-bottom: 0px;
    margin-left: 0px;
    font-size: 15px;
    color: #122B46;
    gap: 1px;
}

.ku-admit-host-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ku-admit-host-label {
    padding-top: 22px;
    margin-left: 20px;
    font-size:   14px;
    line-height:  1;
    font-weight: 600;
    color: #606060;
}

.ku-admit-host-name {
    margin-top:  -14px;
    margin-left: 20px;
    font-size:   20px;
    line-height:  1;
    color: #122B46;
}

.ku-admit-welcome-message {
    border: 1px solid var(--ku-card-border);
    border-radius: 7px;
    padding:      20px;
    background: #fff;
}

.ku-admit-welcome-message--fallback .button,
.ku-admit-go-world {
    display: inline-block;
    margin-top: 8px;
}

.ku-admit-links-codes .ku-url-row input[readonly] {
    background: #f7f9fb;
}

.ku-join-enabled-wrap {
    white-space: nowrap;
}

.ku-welcome-editor-form .wp-editor-wrap,
.ku-welcome-editor-form textarea {
    width: 100%;
}

@media (max-width: 782px) {
    .ku-row,
    .ku-row-between {
        flex-direction: column;
        align-items: flex-start;
    }

    /*
       Keep the Admit Header host row horizontal on phones
       ----------------------------------------------------------------------
       The host block uses .ku-row for shared layout, but for this specific
       header area we do NOT want the mobile rule to stack the text under
       the avatar.
    */
    .ku-admit-header-host.ku-row {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
    }

    /*
       Allow the text block to stay beside the avatar without forcing a wrap
    */
    .ku-admit-host-meta {
        min-width: 0;
    }

    .ku-join-enabled-wrap {
        white-space: normal;
    }
}

@media (max-width: 720px) {
    .ku-grid-2,
    .ku-alc .ku-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   Dashboard Help Zones
   ==========================================================
   Elementor containers used as dashboard help zones should use:
   - CSS class: ku-dashboard-help-zone
   - CSS ID:    ku-help-{tool}

   Example:
   ?ku_tool=events shows #ku-help-events.

   Live pages hide inactive Help Zones. Elementor edit mode keeps
   all Help Zones visible so the containers can be edited.
*/

body:not(.elementor-editor-active) .ku-dashboard-help-zone:not(.ku-dashboard-help-zone-active) {
	display: none !important;
}

body.elementor-editor-active .ku-dashboard-help-zone {
	display: block !important;
	opacity: 1 !important;
	outline: 2px dashed #DD9933;
	padding: 12px;
	margin-bottom: 12px;
}


/* ==========================================================
   Helper Text Floor — 12px minimum
   Ensures note/helper text in Join URL and Join Message panels
   never renders below 12px regardless of inherited styles.
   ========================================================== */

.ku-admit-links-codes .ku-help,
.ku-admit-links-codes .ku-help-accent,
.ku-admit-links-codes .description,
.ku-admit-welcome-editor .ku-help,
.ku-admit-welcome-editor .ku-help-accent,
.ku-admit-welcome-editor .description {
    font-size: max(14px, 1em) !important;
}


/* ==========================================================================
   KU MARK: Welcome Message — moved from class-ku-admit-welcome-renderer.php
   These rules were previously emitted as an inline <style> block by the
   shortcode. They belong here so the renderer stays markup-only.
   ========================================================================== */

/* Base text — size, line-height, and color via tokens. */
.ku-welcome {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ku-text);
}

/* Optional modifier: force serif (Times) on specific pages. */
.ku-welcome.ku-welcome--serif {
    font-family: "Times New Roman", Times, serif !important;
}

/* Paragraph spacing — neutralize theme resets. */
.ku-welcome p {
    margin: 0 0 12px 0 !important;
    display: block;
}

/* List spacing. */
.ku-welcome ul,
.ku-welcome ol {
    margin: 0 0 12px 1.35em !important;
}

/* Heading spacing — inherit weight/face from global CSS. */
.ku-welcome h1 {
    margin: 0 0 12px 0;
    line-height: 1.25;
}

.ku-welcome h2 {
    margin: 0 0 10px 0;
    line-height: 1.25;
}

.ku-welcome h3 {
    margin: 0 0 8px 0;
    line-height: 1.35;
}


/* ==========================================================================
   KU MARK: Offer Flow — Auth Screen (inline login + BB registration link)
   ========================================================================== */

/*
   Outer wrapper — centers and caps width for the auth screen.
*/
.ku-offer-auth {
    max-width: 720px;
    margin: 0 auto;
}

/*
   Two-column grid: Sign In on the left, Create Account on the right.
   Stacks to a single column on narrow screens (see @media below).
*/
.ku-offer-auth-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 16px;
}

/*
   Individual column card — matches .ku-card pattern.
*/
.ku-offer-auth-col {
    background: #ffffff;
    border: 1px solid var(--ku-card-border);
    border-radius: var(--ku-radius);
    padding: 20px;
}

/*
   Column heading — "Sign In" / "Create Account".
   Bottom border uses the KU navy to anchor the heading visually.
*/
.ku-offer-auth-col-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ku-text);
    margin: 0 0 14px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #122B46;
    line-height: 1.2;
}

/*
   WordPress login form field rows.
   wp_login_form() emits: <p class="login-username">, <p class="login-password">,
   <p class="login-remember">, <p class="wp-submit">.
*/
.ku-offer-auth-col .login-username,
.ku-offer-auth-col .login-password,
.ku-offer-auth-col .login-remember {
    margin-bottom: 10px;
}

.ku-offer-auth-col .login-username label,
.ku-offer-auth-col .login-password label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ku-text);
    margin-bottom: 4px;
}

.ku-offer-auth-col .login-username input[type="text"],
.ku-offer-auth-col .login-password input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ku-input-border);
    border-radius: var(--ku-radius);
    background: var(--ku-input-bg);
    color: var(--ku-text);
    font-size: 15px;
    box-sizing: border-box;
}

/*
   Submit button inside the wp_login_form() wrapper.
   wp_login_form() renders: <p class="wp-submit"><input type="submit" class="button button-primary ...">
*/
.ku-offer-auth-col .wp-submit input[type="submit"] {
    display: block;
    width: 100%;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
    background: #122B46 !important;
    border: 1.5px solid #122B46 !important;
    color: #ffffff !important;
    border-radius: var(--ku-radius);
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: none !important;
    transition: background .15s ease, color .15s ease;
}

.ku-offer-auth-col .wp-submit input[type="submit"]:hover {
    background: #ffffff !important;
    color: #122B46 !important;
}

/*
   Register column body text.
*/
.ku-offer-register-body {
    font-size: 15px;
    color: var(--ku-text);
    line-height: 1.5;
    margin-bottom: 16px;
}

/*
   "Create Account" button — full-width block link, matches submit button style.
*/
.ku-offer-register-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
    background: #122B46;
    color: #ffffff !important;
    border: 1.5px solid #122B46;
    border-radius: var(--ku-radius);
    text-decoration: none;
    box-sizing: border-box;
    transition: background .15s ease, color .15s ease;
}

.ku-offer-register-btn:hover {
    background: #ffffff;
    color: #122B46 !important;
}


/* ==========================================================================
   KU MARK: Offer Flow — Confirmation Card
   ========================================================================== */

/*
   Outer wrapper — centers and caps the confirmation card width.
*/
.ku-offer-confirm {
    max-width: 680px;
    margin: 0 auto;
}

/*
   Card container — white card with standard border/radius.
*/
.ku-offer-confirm-card {
    border: 1px solid var(--ku-card-border);
    border-radius: var(--ku-radius);
    background: #ffffff;
    overflow: hidden;
    margin-bottom: 16px;
}

/*
   Hero image — matches the banner ratio used in the Admit Header.
   Uses the same --ku-banner-ratio CSS variable (5.9) so the two
   banner treatments are visually consistent.
*/
.ku-offer-confirm-hero {
    width: 100%;
    aspect-ratio: var(--ku-banner-ratio, 5.9);
    overflow: hidden;
}

.ku-offer-confirm-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/*
   Body section — centered text below the hero image.
*/
.ku-offer-confirm-body {
    padding: 24px 20px 20px;
    text-align: center;
}

/*
   Offer label — pill badge, reuses badge color tokens.
*/
.ku-offer-confirm-label {
    display: inline-block;
    background: var(--ku-badge-bg);
    border: 1px solid var(--ku-badge-border);
    color: var(--ku-badge-text);
    font-size: 13px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
    letter-spacing: 0.02em;
}

/*
   Primary message — "Your access is now active."
*/
.ku-offer-confirm-msg {
    font-size: 22px;
    font-weight: 700;
    color: var(--ku-text);
    margin: 0 0 6px 0;
    line-height: 1.2;
}

/*
   World name subtitle below the primary message.
*/
.ku-offer-confirm-sub {
    font-size: 15px;
    color: var(--ku-muted);
    margin: 0 0 20px 0;
}

/*
   Button row — centered, allows wrapping on very small screens.
*/
.ku-offer-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/*
   "Enter [World Name]" button.
*/
.ku-offer-confirm-enter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    font-size: 16px;
    font-weight: 600;
    background: #122B46;
    color: #ffffff !important;
    border: 1.5px solid #122B46;
    border-radius: var(--ku-radius);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.ku-offer-confirm-enter:hover {
    background: #ffffff;
    color: #122B46 !important;
}

/*
   Welcome message wrapper below the confirmation card.
   Uses .ku-helpbox for the bordered card treatment matching the
   existing Admit Subscriber page style.
*/
.ku-offer-welcome {
    margin-top: 4px;
}


/* ==========================================================================
   KU MARK: Offer Flow — Mobile responsive additions
   ========================================================================== */

@media (max-width: 600px) {

    /* Auth panel stacks to single column on phones. */
    .ku-offer-auth-panel {
        grid-template-columns: 1fr;
    }

    /* Confirmation card hero shrinks gracefully — allow natural height. */
    .ku-offer-confirm-hero {
        aspect-ratio: auto;
        max-height: 120px;
    }
}


/* ==========================================================================
   KU MARK: Toggle Component
   Shared toggle switch used by Offer Manager and Links & Codes.
   Scoped to .ku so the styles don't leak outside the plugin's wrappers.
   ========================================================================== */

.ku .ku-toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ku .ku-toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.ku .ku-toggle-track {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: var(--ku-toggle-off, #CDA3A5);
    display: inline-block;
    flex-shrink: 0;
    transition: background .15s ease;
}

.ku .ku-toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
    transition: transform .15s ease;
}

.ku .ku-toggle input:checked + .ku-toggle-track {
    background: var(--ku-toggle-on, #C5CEB6);
}

.ku .ku-toggle input:checked + .ku-toggle-track::after {
    transform: translateX(20px);
}

.ku .ku-toggle-text {
    font-size: 14px;
    color: var(--ku-muted);
}

.ku .ku-toggle input:disabled + .ku-toggle-track {
    filter: grayscale(0.2);
    opacity: .6;
    cursor: not-allowed;
}


/* ==========================================================================
   KU MARK: Button Variants
   Extends .ku-btn with size and intent modifiers.
   ========================================================================== */

/*
   Small — used for Edit / Delete actions inside offer rows.
*/
.ku-btn.ku-btn-sm {
    padding: 5px 12px;
    font-size: 13px;
}

/*
   Danger — destructive actions such as Delete.
*/
.ku-btn.ku-btn-danger {
    border-color: #b91c1c;
    color: #b91c1c;
}

.ku-btn.ku-btn-danger:hover {
    background: #b91c1c;
    color: #ffffff;
    border-color: #b91c1c;
}

/*
   Ghost — secondary / cancel actions; transparent background.
*/
.ku-btn.ku-btn-ghost {
    background: transparent;
    color: var(--ku-text);
    border-color: var(--ku-card-border);
}

.ku-btn.ku-btn-ghost:hover {
    background: #f3f4f6;
    border-color: var(--ku-input-border);
}


/* ==========================================================================
   KU MARK: Form Helpers
   Shared form label and required-marker utility classes.
   ========================================================================== */

.ku-field-label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--ku-text);
    font-size: 13px;
}

.ku-required {
    color: #b91c1c;
    margin-left: 2px;
}

/*
   Select fields: override the monospace font applied by .ku-input so
   dropdowns render in the same display typeface as the rest of the UI.
*/
select.ku-input {
    font-family: var(--ku-font-display);
    cursor: pointer;
    -webkit-appearance: auto;
    appearance: auto;
}

/*
   Number and date inputs: also inherit display font to avoid monospace
   numerals looking out of place inside forms.
*/
input[type="number"].ku-input,
input[type="date"].ku-input {
    font-family: var(--ku-font-display);
}


/* ==========================================================================
   KU MARK: Offer Manager
   Host-facing shortcode [ku_admit_offer_manager].
   ========================================================================== */

/*
   Root wrapper.
*/
.ku-offer-mgr {
    color: var(--ku-text);
}

/*
   Create / Edit form card — shown above the table when active.
*/
.ku-offer-mgr-form {
    margin-bottom: 16px;
}

/*
   Checkboxes in the New/Edit Passport form (Roles Assigned, Include
   Application, Require completion before entering) - accent-color tints
   the native checkbox itself, both the outline and the checked fill, so
   no custom checkbox markup is needed. Does not affect the Active status
   control below, which is a separate toggle-switch element, not a plain
   checkbox. Added 07-11-2026.
*/
.ku-offer-mgr-form input[type="checkbox"] {
    accent-color: #122B46;
}

.ku-offer-mgr-form-title {
    margin: 0 0 16px 0;
    font-family: var(--ku-font-display);
    font-size: 16px;
    color: var(--ku-text);
}

.ku-offer-mgr-form-actions {
    margin-top: 8px;
    gap: 8px;
    flex-wrap: wrap;
}

/*
   Empty-state message.
*/
.ku-offer-mgr-empty {
    color: var(--ku-muted);
    font-size: 14px;
    margin: 0;
    padding: 4px 0;
}

/* ── Table layout ─────────────────────────────────────────────────────── */

/*
   Wrapper enables horizontal scroll on narrow screens without
   affecting the surrounding card layout.
*/
.ku-offer-mgr-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ku-offer-mgr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

/* ── Header ─────────────────────────────────────────────────────────── */

.ku-offer-mgr-table thead tr {
    border-bottom: 2px solid var(--ku-card-border);
}

.ku-offer-mgr-table th {
    text-align: left;
    padding: 4px 10px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ku-muted);
    white-space: nowrap;
}

/* ── Body rows ─────────────────────────────────────────────────────── */

.ku-offer-mgr-row {
    border-bottom: 1px solid var(--ku-card-border);
    transition: background .1s ease;
}

.ku-offer-mgr-row:last-child {
    border-bottom: none;
}

.ku-offer-mgr-row:hover {
    background: rgba(0, 0, 0, .025);
}

.ku-offer-mgr-table td {
    padding: 10px;
    vertical-align: middle;
}

/* ── Column specifics ───────────────────────────────────────────────── */

/*
   Label column: bold display font, takes available width.
*/
.ku-om-td-label {
    font-weight: 600;
    font-family: var(--ku-font-display);
    font-size: 14px;
    min-width: 120px;
}

/*
   Status column: toggle (active/inactive) or static badge (expired/full).
   No-wrap keeps toggle and text on one line.
*/
.ku-om-td-status {
    white-space: nowrap;
}

/*
   Inline row toggle — extends .ku-toggle for use inside a table cell.
   The .ku-offer-mgr-status badge sits as the toggle's text label.
*/
.ku .ku-om-row-toggle {
    gap: 6px;
}

/*
   Uses column: centered, fixed narrow width.
*/
.ku-om-th-uses,
.ku-om-td-uses {
    text-align: center;
    width: 60px;
}

/*
   Questionnaire column: centered icon (or blank). No fixed width -
   the header's own white-space: nowrap (set on all th above) keeps
   "Questionnaire" from wrapping, so the column just sizes itself to
   fit that word, same as the Passport / Role columns do.
*/
.ku-om-th-questionnaire,
.ku-om-td-questionnaire {
    text-align: center;
}

/*
   Role column: muted, compact.
*/
.ku-om-td-role {
    white-space: nowrap;
    color: var(--ku-muted);
    font-size: 12px;
}

/*
   Wraps the Role column's badge list when a Passport has one or more
   Roles assigned. Replaces an inline style attribute. Added 07-11-2026.
*/
.ku-om-role-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/*
   Invite link column: input + Copy button in a flex row.
*/
.ku-om-td-url {
    min-width: 200px;
}

.ku-offer-mgr-url-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ku-offer-mgr-url-input {
    flex: 1 1 0;
    min-width: 0;
    font-size: 11px;
    padding: 4px 8px;
    height: auto;
}

/*
   Actions column: Edit + Delete, right-aligned, shrink to content.
   The delete <form> is set to display:inline so it does not add block
   spacing between the Edit link and the Delete button.
*/
.ku-om-th-actions,
.ku-om-td-actions {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

.ku-om-td-actions form {
    display: inline;
    margin: 0;
    padding: 0;
}

.ku-om-td-actions .ku-btn + .ku-btn,
.ku-om-td-actions .ku-btn + form .ku-btn {
    margin-left: 4px;
}

/* ── Status badges ────────────────────────────────────────────────────── */

.ku-offer-mgr-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.ku-offer-mgr-status--active {
    background: var(--ku-badge-bg, #A8B691);
    border: 1px solid var(--ku-badge-border, #6A8E22);
    color: var(--ku-badge-text, #ffffff);
}

.ku-offer-mgr-status--inactive {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    color: var(--ku-muted);
}

.ku-offer-mgr-status--expired {
    background: #fff8e1;
    border: 1px solid #f59e0b;
    color: #92400e;
}

.ku-offer-mgr-status--full {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

/* ==========================================================================
   KU MARK: Offer Manager — Mobile
   Horizontal scroll on the table wrapper handles narrow screens.
   On very small screens, hide the Role column to reclaim space.
   ========================================================================== */

@media (max-width: 600px) {

    .ku-om-th-role,
    .ku-om-td-role {
        display: none;
    }
}


/* ==========================================================================
   KU MARK: Join Log Table
   Host-facing shortcode [ku_admit_join_log].
   ========================================================================== */

.ku-join-log-table {
    font-size: 13px;
}

/* Date — no-wrap prevents "Jun 12," / "2026" line-break. */
.ku-join-log-table .ku-jl-td-date {
    white-space: nowrap;
    width: 100px;
}

/* Member — takes available space. */
.ku-join-log-table .ku-jl-td-member {
    min-width: 110px;
}

/* Member name link to BuddyBoss profile - navy at rest, gold + underlined
 * on hover, matches the site's established link convention (see
 * ku-world-creation-wizard.css .ku-wizard-back-link for the same pattern).
 * Needs !important because the theme applies its own link styling with
 * !important too. Added 08-06-2026. */
.ku-join-log-table .ku-jl-td-member a {
    color: #122B46 !important;
    text-decoration: underline !important;
}

.ku-join-log-table .ku-jl-td-member a:hover,
.ku-join-log-table .ku-jl-td-member a:focus {
    color: #DD9933 !important;
    text-decoration: underline !important;
}

/* Role and Host — equal share, don't collapse. */
.ku-join-log-table .ku-jl-td-role,
.ku-join-log-table .ku-jl-td-host {
    min-width: 100px;
    color: var(--ku-muted);
}

/* Offer label cell */
.ku-join-log-table .ku-jl-td-offer {
    min-width: 100px;
    color: var(--ku-muted);
}

/* Delete button cell — shrink to content, right-aligned. */
.ku-join-log-table .ku-jl-td-actions {
    width: 70px;
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .ku-join-log-table .ku-jl-td-host,
    .ku-join-log-table .ku-jl-td-offer {
        display: none;
    }
}


/*
   Passport Links row actions - added when the row's plain "Delete" text
   button became an icon-only trash-can button to match the rest of the
   Passport tool's delete buttons (see .ku-app-delete-btn in
   ku-world-application.css, the shared style this button now reuses).
   The existing .ku-btn + form .ku-btn spacing rule above only matches
   .ku-btn buttons, so it no longer applies to this one - restated here
   for the new class instead.
*/
.ku-om-td-actions .ku-btn + form .ku-app-delete-btn {
    margin-left: 4px;
}

/*
   Passport Links "Questionnaire attached" indicator - shown next to a
   Passport's name when that Passport has Include Questionnaire turned
   on. Added 08-2026, part of making the compact table communicate this
   without a dedicated column.
*/
.ku-om-questionnaire-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #6A8E22;
    vertical-align: middle;
}

.ku-om-questionnaire-flag svg {
    width: 13px;
    height: 13px;
    color: #ffffff;
}

/* Passport Links filter bar — "Has Questionnaire" checkbox + Roles dropdown */
.ku-om-quest-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .82em;
    font-weight: 600;
    color: #444;
    white-space: nowrap;
    cursor: pointer;
}

.ku-om-role-filter {
    max-width: 170px;
    margin: 0;
}