/*
Theme Name: paramour.services Child
Template: listeo
Version: 1.0.0
*/


/*

#dashboard {
  display: block;
  padding-top: 0px;
  min-height: 0px;
}

#header {
    position: relative;
    z-index: 999;
    padding: 18px 0 8px 0;
    box-shadow: 0;
    font-size: 16px;
    box-shadow: 0 0 0 0;
}

*/


/* HEADER */

.header-topbar-content {
  display: flex;
}

.booking-bubbles-container {
  flex:1;
}

.header-topbar-content {
    display: flex
;
    flex-direction: row-reverse;
} /* TODO: only on mobile */


.usrname {
  display:none;
}

.user-menu .user-name:after {
    display: block;
}


/* SIDEBAR NAVIGATION 

body.light-dashboard.page-template-template-dashboard .dashboard-nav ul li a {
        padding: 22px 22px;
    }

body.light-dashboard.page-template-template-dashboard .dashboard-nav ul ul:not(.dokan-dashboard-menu) li a {
        padding-top: 5px;
        padding-bottom:5px;
        font-weight: 400;
    }

        body.light-dashboard.page-template-template-dashboard .dashboard-nav ul:before {
        margin-bottom: 12px;
    }

    body.light-dashboard.page-template-template-dashboard .dashboard-nav ul li.active ul {
        padding-bottom: 15px;
    }

    body.light-dashboard.page-template-template-dashboard .dashboard-nav ul li {
        border-radius: 20px;
    }

.dashboard-nav-inner ul.submenu li.active > a {
  color: #e15252 !important;       
  font-weight: 600 !important;    
  font-family: Raleway !important;
}

*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* Cooper Black: @font-face in fonts/cooper-black.css, enqueued early in functions.php */
.header-title-text {
  font-family: 'Cooper Black', 'Bookman Old Style', Georgia, 'Times New Roman', serif;
}

#current-time-space {
    font-family: 'Montserrat', sans-serif;
    padding-left: 5px;
    display: inline;
}


/* MOBILE NAVIGATION */

.dashboard-responsive-nav-trigger {
  display: none !important;
}


/* General */

.listeo-shortcode-embed .container {

    width: unset;
    max-width: unset;
    /* padding-left: 45px;
    padding-right: 45px; */
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    padding-left: 0px; 
    padding-right: 0px; 
}


/* Paramour Landing – Listeo native skin */

:root{
  --listeo-primary:#f91942;
  --listeo-gray:#66676b;
  --listeo-muted:#888;
  --ok:#23b35f;
  --warn:#f59e0b;
  --border:#e0e0e0;
  --radius:12px;
}

/* Layout */
.section-main-container{font-family:Raleway,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:#333;background:transparent;padding:0px;}
.section-grid{display:grid;gap:16px;grid-template-columns:1fr;}
@media(min-width:780px){.section-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1600px){.section-grid{grid-template-columns:repeat(3,1fr);}}
.section-box{border-radius:var(--radius);padding:14px;}
.section-title{margin:0 0 10px;font-weight:600;font-size:1.05rem}

/* Hero */
.section-hero{margin-bottom:24px;}
.hero-card{position:relative;border-radius:var(--radius);overflow:hidden;}
.hero-image{width:100%;height:260px;object-fit:cover;display:block;}
.hero-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,.55) 90%);}
.hero-meta{position:absolute;left:16px;right:16px;bottom:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;}
.hero-badges{display:flex;gap:8px;}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-weight:600;font-size:.9rem;color:#fff;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(249,25,66,.75);}
.badge-views{background:rgba(59,130,246,.7);}
.badge-likes{background:rgba(249,25,66,.75);}

/* Cards */
.card-list,.media-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px;}
.card .avatar{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#f0f0f0;font-weight:700;color:#555;}
.card .icon{font-size:20px;}
.card-body{margin-left:8px;}
.card-title{margin:0 0 2px;font-weight:700;}
.card-subtitle{margin:0;color:var(--listeo-muted);}
.card-meta{margin-top:2px;font-size:.86rem;color:var(--listeo-muted);}
.card-location{margin:8px 0;color:var(--listeo-muted);}
.actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}

/* Variants */
.card-new-booking{border-left:4px solid var(--ok);}
.card-booking-warning{border-left:4px solid var(--warn);}
.card-reminder{background:#ffffff;}
.card-success{background:#edf8f1;border-color:#c8edd7;}
.card-tip{background:#fef0f3;border-color:#f9c5cf;}
.card-note{background:#f6f6f6;}
.card-time{background:#f0f6ff;border-color:#d5e6ff;}
.card-stat.card-success{background:#edf8f1;border-color:#c8edd7;}
.card-stat.card-info{background:#eef4ff;border-color:#d8e4ff;}
.card-stat.card-warning{background:#fff6e6;border-color:#ffe2b8;}

/* Media (locations) */
.media-card{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:12px;padding:8px;}
.media-thumb{width:100%;height:60px;object-fit:cover;border-radius:8px;}
.media-title{margin:0 0 2px;font-weight:600;}
.media-meta{display:flex;gap:12px;color:var(--listeo-muted);}

/* Compact mode */
.section-box.is-compact .card.is-ghost{background:transparent;border:0;padding:10px 0;}
.section-box.is-compact .card.is-ghost+.card.is-ghost{border-top:1px solid var(--border);}
.section-box.is-compact .card:not(.is-ghost){padding:12px;border-radius:10px;margin:6px 0;}
.section-box.is-compact .card.is-ghost .row-flex{display:flex;gap:10px;align-items:flex-start;}

/* Bookings avatars */
.avatar-img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 38px;border:1px solid var(--border);background:#f0f0f0;}
.card-header{display:flex;align-items:center;gap:10px;}
.who-when{display:grid;}
.who{font-weight:700;line-height:1.2;}
.when{font-size:.9rem;color:var(--listeo-muted);}

/* Tags */
.tags{display:flex;gap:8px;flex-wrap:wrap;}
.tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;font-weight:600;background:#f6f6f6;border:1px solid #e9e9e9;}


/* BOOKING CARDS OWN STYLES */
/* --- Booking Card: overall --- */
.booking-card {
  width: 100%;
  background: #fafafa;
  padding: 16px 20px;
  border-radius: 8px;
  border: 1px solid #e6e6e6;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  transition:none;
}


#pmb-landing-bookings #booking-requests {
    background: transparent;
    padding: 0px 14px;
}

/* Row with three columns */
.booking-card-head-section {
  display: flex;
  align-items: center;            /* centers image + content + aside on the same baseline */
  gap: 16px;                      /* space between image and content */
}

/* --- Left: Image --- */
.booking-card-image {
  flex: 0 0 80px;                 /* fixed column width */
}
.booking-card-image img {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}

/* --- Middle: Content (fills remaining space) --- */
.booking-card-content {
  flex: 1 1 auto;                 /* take all leftover width */
  min-width: 0;                   /* prevent overflow in long names */
  display: flex;
  flex-direction: column;
  align-items: flex-start;         /* left-align text column */
  gap: 6px;
}

.booking-card-head {
  margin: 0;
}
.booking-card-head .booking-name,
.booking-name {
  margin: 0;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
}

.booking-title {
  margin: 0;
  color: #666;
  font-size: 0.95rem;
}

.booking-meta { margin-top: 2px; }

.booking-time {
  display: inline-block;
  background: #eee;
  color: #333;
  padding: 3px 8px;
  border-radius: 999px;           /* pill look */
  font-size: 0.9rem;
  line-height: 1;
}

/* --- Right: Aside (tight right column) --- */
.booking-aside {
  flex: 0 0 auto;                 /* content-sized column on the right */
  display: flex;
  flex-direction: column;
  align-items: flex-end;          /* right-align both pills */
  gap: 10px;
  margin-left: 16px;              /* space from middle column */
}

/* Rating pill */
.booking-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fef3c7;           /* soft yellow */
  border: 1px solid #fde68a;
  color: #92400e;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1;
}
.star { color: #f59e0b; }

/* Timer box */
.booking-timer {
  background-color: #fef9c3;
  border-color: #fef08a;
  border-style: solid;
  padding: 8px 12px;
  border-radius: 10px;
  text-align: center;
  min-width: 120px;               /* keeps a neat block */
  color: #92400e;  
    font-weight: 600;
    border-width: 1px;
}
.timer-value {
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
}
.timer-fee {
  display: block;
  font-size: 0.85rem;
  color: #2f4f3a;
}

/* --- Small screens: stack the right column under the middle --- */
@media (max-width: 560px) {
  .booking-card-head-section {
    align-items: flex-start;
  }
  .booking-aside {
    align-items: flex-start;      /* left-align when stacked */
    margin-left: 76px;            /* lines up under the text column (60px img + 16px gap) */
  }
}


/* ===== HERO WITH RIGHT CONTROL PANEL ===== */
.hero-with-control{
  display:flex;
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft, 0 4px 24px -8px rgba(0,0,0,0.12));
  margin-bottom:24px;
}

/* left: image area */
.hero-main{
  position:relative;
  flex:1 1 auto;
}
.hero-main img{
  width:100%;
  height:260px;           /* match your original hero height */
  object-fit:cover;
  display:block;
}
@media(min-width:768px){
  .hero-main img{ height:340px; }
}

/* gradient overlay */
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.55), transparent 60%);
}

/* bottom content row */
.hero-content{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:16px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

/* badges + cta (reuse your variables) */
.hero-stats{ display:flex; gap:8px; }
.stat-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; font-weight:600; font-size:.9rem; color:#fff;
  border-radius:999px; border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.35); backdrop-filter:blur(10px);
}
.hero-cta{
  background:var(--primary,#f91942); color:#fff;
  padding:8px 14px; border-radius:999px; font-weight:600; font-size:.9rem;
  border:0; cursor:pointer; box-shadow:var(--shadow-soft, 0 4px 24px -8px rgba(0,0,0,0.12));
  transition:background .2s ease;
}
.hero-cta:hover{ background:color-mix(in srgb, var(--primary,#f91942) 90%, black); }

/* right: control panel */
.control-panel{
  width:96px;
  background:var(--card-bg,#f6f6f6);
  border-left:1px solid rgba(0,0,0,0.1);
  padding:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
  box-shadow:var(--shadow-control, 0 2px 12px -4px rgba(0,0,0,0.08));
}
@media(min-width:768px){
  .control-panel{ width:112px; }
}

/* toggle */
.control-toggle{
  position:relative; width:44px; height:24px; border-radius:12px;
  background:#e0e0e0; cursor:pointer; transition:background .2s;
}
.control-toggle.active{ background:var(--primary,#f91942); }
.control-toggle::after{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 2px 4px rgba(0,0,0,0.2); transition:transform .2s;
}
.control-toggle.active::after{ transform:translateX(20px); }

.control-label{
  font-size:.875rem; font-weight:600; color:var(--card-fg,#333); text-align:center;
}

/* round buttons */
.control-actions{ display:flex; gap:.75rem; }
.control-btn{
  width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px;
  box-shadow:var(--shadow-soft, 0 4px 24px -8px rgba(0,0,0,0.12)); transition:transform .2s;
}
.control-btn:hover{ transform:scale(1.05); }
.control-btn.add{ background:var(--primary,#f91942); }
.control-btn.edit{ background:var(--info,#3184ae); }

/* mobile: stack control under image */
@media(max-width:480px){
  .hero-with-control{ flex-direction:column; }
  .control-panel{
    width:100%; border-left:none; border-top:1px solid rgba(0,0,0,0.1);
    flex-direction:row; justify-content:space-around; padding:14px;
  }
}


/**
 * iOS Control Center Inspired Dashboard Styles
 * 
 * Mobile-first responsive design with iOS aesthetics and reversed color scheme
 * Main colors: White background, #f6f6f6 cards (desktop) | Reversed for mobile
 * Accent: #f91942 (primary red) with light-rose-pink variations
 * Font: Raleway for elegant, timeless typography
 * 
 * @version 2.1.0
 * @author Dashboard Team
 */

/* Import Raleway font */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap');

/* ==================== CSS CUSTOM PROPERTIES ==================== */
:root {
    /* ===== BRAND COLORS ===== */
    --primary-accent: #f91942;
    --primary-accent-hover: #d41437;
    --primary-accent-light: rgba(249, 25, 66, 0.06);
    
    /* ===== DESKTOP THEME (Light) ===== */
    --desktop-background: #f6f6f6;
    --desktop-card-bg: #f6f6f6;
    --desktop-text-primary: #000;
    --desktop-text-secondary: #666;
    --desktop-text-muted: #999;
    --desktop-border: rgba(0, 0, 0, 0.06); /* Lighter desktop borders */
    --desktop-shadow: rgba(0, 0, 0, 0.03); /* Subtler desktop shadows */
    --desktop-shadow-hover: rgba(0, 0, 0, 0.06);
    
    /* ===== MOBILE THEME (Light Gray Background, White Cards) ===== */
    --mobile-background: #f5f5f7;
    --mobile-card-bg: #fff;
    --mobile-text-primary: #1d1d1f;
    --mobile-text-secondary: #666;
    --mobile-text-muted: #999;
    --mobile-border: rgba(0, 0, 0, 0.05); /* Much lighter borders */
    --mobile-shadow: rgba(0, 0, 0, 0.02); /* Subtler shadows */
    --mobile-shadow-hover: rgba(0, 0, 0, 0.04);
    
    /* ===== SPECIAL COLOR PAIRS (as specified) ===== */
    --success-light: #04C69A2B;
    --success: #04C69A;
    --purple-light: #8900CC1A;
    --purple: #8900CC;
    --orange-light: #F6910E26;
    --orange: #F6910E;
    --blue-light: #E9F7FE;
    --blue: #3184ae;
    --cyan-light: #61b2db18;
    --cyan: #61b2db;
    --yellow-light: #e2c51020;
    --yellow: #bea507;
    --green-light: #64bc361;
    --green: #64bc36;
    --red-light: #ee353510;
    --red: #ee3535;
    --gray-light: #f1f3f9;
    --gray: #464a57;
    
    /* ===== STATUS DOT COLORS ===== */
    --accent-green: #34c759; /* iOS green */
    --accent-yellow: #ffcc02; /* iOS yellow */
    --accent-blue: #007aff; /* iOS blue */
    
    /* ===== LAYOUT PROPERTIES ===== */
    --border-radius-small: 8px;
    --border-radius-medium: 12px;
    --border-radius-large: 16px;
    --border-radius-xl: 20px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-xxl: 24px;
    --spacing-xxxl: 32px;
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* ===== TYPOGRAPHY ===== */
    --font-system: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-xxl: 24px;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ===== DYNAMIC THEME VARIABLES (Mobile First) ===== */
    --current-bg: var(--mobile-background);
    --current-card-bg: var(--mobile-card-bg);
    --current-text-primary: var(--mobile-text-primary);
    --current-text-secondary: var(--mobile-text-secondary);
    --current-text-muted: var(--mobile-text-muted);
    --current-border: var(--mobile-border);
    --current-shadow: var(--mobile-shadow);
    --current-shadow-hover: var(--mobile-shadow-hover);
    --item-background: #f8f8f8; /* Light gray for mobile booking items */
    --border-color: var(--mobile-border);
}

/* Desktop theme override */
@media (min-width: 768px) {
    :root {
        --current-bg: var(--desktop-background);
        --current-card-bg: var(--desktop-card-bg);
        --current-text-primary: var(--desktop-text-primary);
        --current-text-secondary: var(--desktop-text-secondary);
        --current-text-muted: var(--desktop-text-muted);
        --current-border: var(--desktop-border);
        --current-shadow: var(--desktop-shadow);
        --current-shadow-hover: var(--desktop-shadow-hover);
        --item-background: var(--desktop-background); /* White for desktop */
        --border-color: var(--desktop-border);
    }
}

/* ==================== BASE & RESET ==================== */
.ios-control-dashboard {
    font-family: var(--font-system);
    line-height: 1.5;
    color: var(--current-text-primary);
    background-color: var(--current-bg);
    padding: var(--spacing-lg);
    min-height: 100vh;
    transition: background-color var(--transition-medium), color var(--transition-medium);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Desktop spacing adjustment */
@media (min-width: 768px) {
    .ios-control-dashboard {
        padding: var(--spacing-xxl);
    }
}

@media (min-width: 1200px) {
    .ios-control-dashboard {
        padding: var(--spacing-xxxl);
        /* max-width: 1400px; */
        margin: 0 auto;
    }
}

/* ==================== HERO SECTION ==================== */
.dashboard-hero-section {
    margin-bottom: var(--spacing-xxl);
}

.hero-control-layout {
    display: flex;
    border-radius: var(--border-radius-large);
    overflow: hidden;
    background-color: var(--current-card-bg);
    box-shadow: 0 4px 20px var(--current-shadow); /* Reduced shadow for flat design */
    transition: all var(--transition-medium);
    
    /* Mobile and Tablet: Keep side-by-side layout (row) */
    flex-direction: row;
}

/* Maintain consistent row layout for all screen sizes */
@media (min-width: 768px) {
    .hero-control-layout {
        min-height: 340px;
    }
}

/* Removed hover effect */

/* ===== HERO MAIN AREA ===== */
.hero-main-area {
    position: relative;
    flex: 1;
    min-height: 280px;
}

@media (min-width: 768px) {
    .hero-main-area {
        min-height: 340px;
    }
}

.hero-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-featured-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}

/* Removed hover effect */

/* iOS-style gradient overlay */
.hero-gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 40%,
        rgba(0, 0, 0, 0.4) 70%,
        rgba(0, 0, 0, 0.8) 100%
    );
    pointer-events: none;
}

/* ===== HERO BOTTOM CONTENT ===== */
.hero-bottom-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .hero-bottom-content {
        padding: var(--spacing-xxl);
    }
}

/* ===== HERO STATISTICS BADGES ===== */
.hero-statistics {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.stat-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    
    /* iOS Glassmorphism Effect */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius-xl);
    
    color: white;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    transition: all var(--transition-fast);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Removed hover effect */

.stat-emoji {
    font-size: var(--font-size-base);
}

.stat-number {
    font-weight: var(--font-weight-bold);
}

/* ===== HERO CTA BUTTON ===== */
.hero-primary-button {
    background: var(--primary-accent);
    color: white;
    border: none;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--border-radius-xl);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 16px rgba(249, 25, 66, 0.3);
    text-transform: none;
    letter-spacing: 0.5px;
}

/* Removed hover effects */

/* ==================== iOS CONTROL CENTER PANEL ==================== */
.ios-control-center {
    background-color: var(--current-card-bg);
    padding: var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--spacing-lg);
    border-top: 1px solid var(--current-border);
    
    /* Mobile: Column layout to save horizontal space */
    flex-direction: column;
    min-height: 140px;
}

/* Desktop: Vertical control panel */
@media (min-width: 768px) {
    .ios-control-center {
        border-top: none;
        border-left: 1px solid var(--current-border);
        flex-direction: column;
        justify-content: center;
        width: 140px;
        min-height: auto;
        background: linear-gradient(135deg, var(--current-card-bg) 0%, color-mix(in srgb, var(--current-card-bg) 95%, var(--primary-accent)) 100%);
    }
}

/* ===== iOS TOGGLE SWITCH ===== */
.ios-toggle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

@media (max-width: 767px) {
    .ios-toggle-container {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
}

.ios-toggle-switch {
    position: relative;
    width: 56px;
    height: 32px;
    border-radius: 16px;
    background-color: var(--current-border);
    cursor: pointer;
    transition: background-color var(--transition-medium);
    outline: none;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ios-toggle-switch:focus {
    box-shadow: 0 0 0 3px rgba(249, 25, 66, 0.3);
}

.ios-toggle-switch.active {
    background-color: var(--primary-accent);
    box-shadow: 0 4px 12px rgba(249, 25, 66, 0.3);
}

.toggle-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    transition: transform var(--transition-medium);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.ios-toggle-switch.active .toggle-slider {
    transform: translateX(24px);
}

.toggle-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--current-text-secondary);
    text-align: center;
    margin: 0;
    transition: color var(--transition-medium);
}

/* ===== CONTROL ACTION BUTTONS ===== */
.control-buttons-group {
    display: flex;
    gap: var(--spacing-md);
    flex-direction: column; /* Column layout for all screen sizes */
}

.control-action-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: white;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

/* Removed hover effects */

.add-btn {
    background: linear-gradient(135deg, var(--primary-accent) 0%, var(--primary-accent-hover) 100%);
}

.edit-btn {
    background: linear-gradient(135deg, var(--blue) 0%, #2c7a9e 100%);
}

.btn-symbol {
    font-size: 22px;
    line-height: 1;
}

/* ==================== iOS SIDEBAR NAVIGATION ==================== */
.ios-sidebar-nav {
    background: #f5f5f7; /* Light gray background for sidebar */
    width: 280px;
    min-height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    font-family: var(--font-system);
    overflow-y: auto;
    border-right: 1px solid var(--mobile-border);
}

.ios-sidebar-inner {
    padding: var(--spacing-lg);
}

/* Navigation Sections */
.ios-nav-section {
    margin-bottom: var(--spacing-sm);
}

.ios-nav-group {
    background: #fff;
    border-radius: var(--border-radius-medium);
    margin-bottom: var(--spacing-sm);
    overflow: hidden;
    box-shadow: 0 2px 8px var(--mobile-shadow);
    border: 1px solid var(--mobile-border);
    transition: all var(--transition-medium);
}

.ios-nav-group.active {
    border-color: var(--primary-accent);
    box-shadow: 0 4px 16px rgba(249, 25, 66, 0.1);
}

/* Navigation Headers */
.ios-nav-header {
    display: flex;
    align-items: center;
    padding: var(--spacing-lg);
    text-decoration: none;
    color: var(--mobile-text-primary);
    position: relative;
    transition: all var(--transition-fast);
}

.ios-nav-header:hover {
    background: rgba(249, 25, 66, 0.02);
}

.ios-nav-icon {
    flex: 0 0 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-accent), var(--primary-accent-hover));
    border-radius: var(--border-radius-medium);
    color: white;
    font-size: var(--font-size-lg);
    margin-right: var(--spacing-md);
}

.ios-nav-content {
    flex: 1;
    min-width: 0;
}

.ios-nav-title {
    display: block;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--mobile-text-primary);
    line-height: 1.3;
    margin-bottom: 2px;
}

.ios-nav-subtitle {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--mobile-text-muted);
    line-height: 1.2;
}

.ios-live-time {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* iOS-style badge */
.ios-nav-badge {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: var(--primary-accent);
    color: white;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 20px;
    text-align: center;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Submenu Styles */
.ios-nav-submenu {
    background: rgba(249, 25, 66, 0.02);
    border-top: 1px solid var(--mobile-border);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-medium) ease-out;
}

.ios-nav-group.expanded .ios-nav-submenu {
    max-height: 300px;
}

.ios-nav-subitem {
    display: flex;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    text-decoration: none;
    color: var(--mobile-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
    border-bottom: 1px solid rgba(0, 0, 0, 0.02);
}

.ios-nav-subitem:last-child {
    border-bottom: none;
}

.ios-nav-subitem:hover {
    background: rgba(249, 25, 66, 0.04);
    color: var(--primary-accent);
}

.ios-nav-subitem.active {
    background: rgba(249, 25, 66, 0.08);
    color: var(--primary-accent);
    font-weight: var(--font-weight-semibold);
}

.ios-nav-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mobile-text-muted);
    margin-right: var(--spacing-md);
    transition: background-color var(--transition-fast);
}

.ios-nav-subitem.active .ios-nav-dot {
    background: var(--primary-accent);
}

/* ==================== iOS MOBILE NAVIGATION ==================== */
.ios-mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    font-family: var(--font-system);
    transform: translateY(0);
    transition: transform var(--transition-medium) ease-out;
}

/* Hide on desktop */
@media (min-width: 768px) {
    .ios-mobile-nav {
        display: none;
    }
}

.ios-mobile-nav.nav-hidden {
    transform: translateY(100%);
}

.ios-mobile-nav-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.ios-mobile-nav-container {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    padding-bottom: calc(var(--spacing-sm) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--mobile-border);
}

.ios-mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--mobile-text-muted);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-medium);
    transition: all var(--transition-fast);
    position: relative;
    min-width: 54px;
    min-height: 54px;
    justify-content: center;
}

.ios-mobile-nav-item.touching {
    background: rgba(249, 25, 66, 0.1);
    transform: scale(0.95);
}

.ios-mobile-nav-item.active {
    color: var(--primary-accent);
}

.ios-mobile-nav-icon {
    position: relative;
    margin-bottom: 4px;
    font-size: var(--font-size-lg);
    transition: transform var(--transition-fast);
}

.ios-mobile-nav-item.active .ios-mobile-nav-icon {
    transform: scale(1.1);
}

.ios-mobile-nav-label {
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    text-align: center;
    letter-spacing: -0.01em;
}

/* Mobile badge */
.ios-mobile-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--primary-accent);
    color: white;
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    padding: 1px 5px;
    border-radius: 8px;
    min-width: 16px;
    text-align: center;
    line-height: 1.3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    border: 1px solid white;
}

/* Active indicator */
.ios-mobile-nav-indicator {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary-accent);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.ios-mobile-nav-item.active .ios-mobile-nav-indicator {
    opacity: 1;
}

/* Scrolling states */
.ios-mobile-nav.scrolling {
    transition: transform 0.1s ease-out;
}

/* ==================== DASHBOARD GRID ==================== */
.dashboard-cards-grid {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: 1fr;
}

/* Responsive grid columns */
@media (min-width: 768px) {
    .dashboard-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }
}

@media (min-width: 1200px) {
    .dashboard-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xxl);
    }
}

/* ==================== DASHBOARD CARDS ==================== */
.dashboard-card {
    background-color: var(--current-card-bg);
    border: 1px solid var(--current-border);
    border-radius: var(--border-radius-large);
    padding: var(--spacing-xl);
    transition: all var(--transition-medium);
    box-shadow: 0 4px 20px var(--current-shadow);
    position: relative;
    overflow: hidden;
}

/* Removed hover effects */

/* ===== CARD HEADERS ===== */
.card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--current-border);
    position: relative;
}

.card-icon {
    font-size: var(--font-size-xl);
    background: var(--primary-accent-light);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.card-title {
    flex: 1;
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--current-text-primary);
    transition: color var(--transition-medium);
}

.notification-badge {
    background: var(--primary-accent);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-medium);
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== CARD BODY ===== */
.card-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* ==================== INBOX ITEMS ==================== */
.inbox-item {
    padding: var(--spacing-md);
    border-radius: var(--border-radius-medium);
    background-color: var(--item-background);
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
    position: relative;
}

.inbox-item {
    position: relative;
}

.inbox-item .item-avatar::after {
    content: '';
    position: absolute;
    right: -2px;
    top: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    opacity: 0.95;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    border: 2px solid var(--current-card-bg);
}

.priority-high .item-avatar::after { background: var(--accent-green); }
.warning-item .item-avatar::after { background: var(--orange); }
.success-item .item-avatar::after { background: var(--success); }

.item-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.item-avatar {
    flex: 0 0 44px;
    position: relative;
}

.avatar-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--current-border); /* Thinner avatar border */
    transition: border-color var(--transition-medium);
}

.item-icon {
    flex: 0 0 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    border-radius: 50%;
    font-weight: var(--font-weight-bold);
}

.warning-icon {
    background: var(--orange-light);
    color: var(--orange);
}

.success-icon {
    background: var(--success-light);
    color: var(--success);
}

.item-content {
    flex: 1;
    min-width: 0;
    padding-right: 20px; /* Space for status dot */
}

.item-title {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--current-text-primary);
    transition: color var(--transition-medium);
}

.item-subtitle {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
    color: var(--current-text-secondary);
    line-height: 1.4;
    transition: color var(--transition-medium);
}

.item-time {
    font-size: var(--font-size-xs);
    color: var(--current-text-muted);
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-medium);
}

/* ==================== SERVICE ITEMS ==================== */
.service-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-medium);
    background-color: var(--item-background);
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
    position: relative;
}

/* Removed hover effect */

.pro-tip-item {
    background: linear-gradient(135deg, var(--red-light), rgba(249, 25, 66, 0.05));
    border-color: rgba(249, 25, 66, 0.2);
}

.info-item {
    background: var(--blue-light);
    border-color: rgba(49, 132, 174, 0.2);
}

.service-icon {
    flex: 0 0 32px;
    font-size: var(--font-size-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tip-icon {
    background: var(--primary-accent-light);
    color: var(--primary-accent);
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.info-icon {
    color: var(--blue);
}

.service-info {
    flex: 1;
    min-width: 0;
}

.service-heading {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--current-text-primary);
    transition: color var(--transition-medium);
}

.service-text {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--current-text-secondary);
    line-height: 1.4;
    transition: color var(--transition-medium);
}

/* ===== PILL TAGS ===== */
.date-pills-container,
.time-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

.date-pill,
.time-pill {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--primary-accent);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-xl);
    transition: all var(--transition-fast);
    cursor: pointer;
}

/* Removed hover effects */

/* ==================== LOCATION ITEMS ==================== */
.location-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-medium);
    background-color: var(--item-background);
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
}

/* Removed hover effect */

.location-image-wrapper {
    flex: 0 0 64px;
}

.location-image {
    width: 64px;
    height: 44px;
    border-radius: var(--border-radius-small);
    object-fit: cover;
    display: block;
    transition: transform var(--transition-fast);
}

/* Removed hover effect */

.location-info {
    flex: 1;
    min-width: 0;
}

.location-name {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--current-text-primary);
    transition: color var(--transition-medium);
}

.location-metrics {
    display: flex;
    gap: var(--spacing-md);
}

.metric-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--current-text-secondary);
    transition: color var(--transition-medium);
}

.metric-icon {
    font-size: var(--font-size-sm);
}

.metric-count {
    font-weight: var(--font-weight-medium);
}

/* ==================== SCHEDULE ITEMS ==================== */
.schedule-item {
    padding: var(--spacing-md);
    border-radius: var(--border-radius-medium);
    background-color: var(--item-background);
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
}

/* Removed hover effect */

.holiday-item {
    background: linear-gradient(135deg, var(--yellow-light), rgba(255, 198, 1, 0.05));
    border-color: rgba(190, 165, 7, 0.3);
}

.schedule-info {
    width: 100%;
}

.schedule-title {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--current-text-primary);
    transition: color var(--transition-medium);
}

.schedule-period {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--primary-accent);
}

/* ==================== STATISTICS ITEMS ==================== */
.stats-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-medium);
    background-color: var(--item-background);
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
    position: relative;
}

/* Removed hover effect */

.trending-item {
    background: linear-gradient(135deg, var(--success-light), rgba(4, 198, 154, 0.05));
    border-color: rgba(4, 198, 154, 0.3);
}

.top-service-item {
    background: var(--blue-light);
    border-color: rgba(49, 132, 174, 0.3);
}

.stats-info {
    flex: 1;
    min-width: 0;
}

.stats-title {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--current-text-primary);
    transition: color var(--transition-medium);
}

.stats-description {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
    color: var(--current-text-secondary);
    line-height: 1.4;
    transition: color var(--transition-medium);
}

.stats-meta {
    font-size: var(--font-size-xs);
    color: var(--current-text-muted);
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-medium);
}

.stats-indicator {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: auto;
}

.stats-indicator.positive {
    background: var(--success);
    box-shadow: 0 0 8px rgba(4, 198, 154, 0.4);
}

.stats-indicator.info {
    background: var(--blue);
    box-shadow: 0 0 8px rgba(49, 132, 174, 0.4);
}

/* ==================== RESPONSIVE ADJUSTMENTS ==================== */
@media (max-width: 480px) {
    .ios-control-dashboard {
        padding: var(--spacing-md);
    }
    
    .hero-bottom-content {
        padding: var(--spacing-lg);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
    
    .hero-statistics {
        width: 100%;
    }
    
    .dashboard-card {
        padding: var(--spacing-lg);
    }
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dashboard-card {
    animation: fadeInUp var(--transition-medium) ease-out;
}

.dashboard-card:nth-child(1) { animation-delay: 0.1s; }
.dashboard-card:nth-child(2) { animation-delay: 0.2s; }
.dashboard-card:nth-child(3) { animation-delay: 0.3s; }
.dashboard-card:nth-child(4) { animation-delay: 0.4s; }
.dashboard-card:nth-child(5) { animation-delay: 0.5s; }
.dashboard-card:nth-child(6) { animation-delay: 0.6s; }

/* ==================== ACCESSIBILITY ==================== */
.ios-toggle-switch:focus,
.control-action-btn:focus,
.hero-primary-button:focus {
    outline: 2px solid var(--primary-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .dashboard-card {
        border-width: 2px;
    }
    
    .stat-badge {
        border-width: 2px;
    }
}

@media (max-width: 768px) {
	.layout-switcher { display: none;}
}



.sign-in-form label input {
    font-weight: 400 ;
    font-size: larger;
    letter-spacing: 0.5px ;
    border: 1px solid #eeeeee;
    border-radius: 10px ;
}



.sign-in-form .tabs-nav li a {
    font-size: larger;
}


input, input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea, select {
    font-weight: 400 ;
    font-size: larger;
    letter-spacing: 0.5px;
    border: 1px solid #eeeeee ;
    border-radius: 10px ;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    font-weight: 400 ;
    font-size: larger;
    letter-spacing: 0.5px;
    border: 1px solid #eeeeee ;
    border-radius: 10px ;

}

.select2-selection__placeholder  {
 
    font-weight: bold ;
    font-size: larger;
    letter-spacing: 0.5px;

}





  /* keep inputs full width
  .sign-in-form.style-1 input.input-text,
  .sign-in-form.style-1 select{ width:100%; }

   */

  /* tabs (no display rules here!) */
  .tabs-nav{
    list-style:none; margin:0 0 16px; padding:0;
    display:flex; gap:24px; border-bottom:1px solid #eee;
  }
  .tabs-nav li{ list-style:none; }
  .tabs-nav li a{ display:block; padding:10px 0; text-decoration:none; }
  .tabs-nav li.active a{ border-bottom:2px solid #f91942; font-weight:600; }
/* ==============  SMALL HANDHELD DEVICES (phones, ≤600px)  ============== */
@media (max-width: 600px) {
  /* shared look */
  .auth-card{
    width: 100%;
    max-width: 520px;
    /* background: #fff; */
    padding: 24px;
    box-sizing: border-box;
    border-radius: 12px;
  }

  /* Default (Register) — flexbox layout */
  .auth-blank-wrap{
    position: static;
    padding: 0 16px 16px 16px;
    background: #f6f6f6;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  /* Remove gap above auth-card in register form */
  .auth-blank-wrap .auth-card {
    margin-top: 0;
  }

  /* Login active — same as register: flexbox layout */
  .auth-blank-wrap:has(#listeo-logintab-btn.active){
    position: static;
    margin-top: 0;
    padding: 0 16px 16px 16px;
    background: #f6f6f6;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}

/* ==============  TABLETS (601px - 768px)  ============== */
@media (min-width: 601px) and (max-width: 768px) {
  /* shared look */
  .auth-card{
    width: 100%;
    max-width: 520px;
    /* background: #fff; */
    padding: 24px;
    box-sizing: border-box;
    border-radius: 12px;
  }

  /* Default (Register) — flexbox layout with vertical centering via padding */
  .auth-blank-wrap{
    position: static;
    padding: 80px 16px 80px 16px; /* Equal top/bottom padding for vertical centering */
    background: #f6f6f6;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    overflow: hidden;
  }
  
  /* Remove gap above auth-card in register form */
  .auth-blank-wrap .auth-card {
    margin-top: 0;
  }

  /* Login active — same as register: flexbox layout with vertical centering */
  .auth-blank-wrap:has(#listeo-logintab-btn.active){
    position: static;
    margin-top: 0;
    padding: 80px 16px 80px 16px; /* Equal top/bottom padding for vertical centering */
    background: #f6f6f6;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    overflow: hidden;
  }
}



/* =========================
   Desktop (≥769px)
   ========================= */
@media (min-width: 769px) {

  .small-dialog-header { background-color: #fff; }

  /* Allow full page scroll; keep card centered horizontally,
     but start near the top so it never hides under the header */
  :root { --desktop-top-gap: 96px; } /* tweak this margin as you like */

  .auth-blank-wrap {
    position: relative;
    width: 100%;
    background: #f6f6f6;

    display: flex;
    flex-direction: column; /* Stack vertically */
    justify-content: flex-start; /* Top-aligned on desktop */
    align-items: center;        /* center horizontally */
    padding: var(--desktop-top-gap) 20px 40px; /* safe top margin */
    box-sizing: border-box;

    overflow: hidden;              /* Prevent page scroll */
  }

  .auth-card {
    padding: 5%;
    max-width: 560px;               /* a bit wider feels nicer on desktop */
    width: 100%;
    font-weight: 400;
    font-size: larger;

    /* REMOVE inner scroll */
    max-height: none;
    overflow: visible;
    box-sizing: border-box;
    border-radius: 12px;
  }
  
  
}

 .popup-with-zoom-anim {
    display: none;
}

/* Override Listeo parent: dialog shells should not force white fill (child theme). */
.listeo-dialog,
#sign-in-dialog,
#claim-dialog,
#small-dialog,
#report-listing-dialog,
#small-dialog-edit,
#small-dialog-edit-review {
	background: transparent;
	padding: 0;
}

.style-1 .tabs-container .tab-content {
    border: none;
    border-top: none;
    padding: 30px 0 0 0;
}

/* Registration: scrollable field stack vs sticky dots + controls (fields container closes before chrome in markup) */
.listeo-registration-form .otp_registration-wrapper {
    display: none;
}

.listeo-registration-form .controls-bar .pmb-formkit-complete-btn {
    display: none;
}

.registration-step-indicator.pmb-hidden-for-otp {
    display: none !important;
}

.listeo-registration-form > .pmb-register-notification-error {
    margin-top: 20px;
    margin-bottom: 0;
}

/* Registration step 2 only: Client / Provider role cards (do not affect step 1 beta or final-step fields) */
/* Listeo uses width: calc(100% + 20px) + div margin-right for a two-column row; column layout needs 100% width or horizontal scroll/clipping occurs. */
.sign-in-form.style-1 #tab2.tab-content .registration-step[data-step="2"] .account-type {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.sign-in-form.style-1 #tab2.tab-content .registration-step[data-step="2"] .account-type > div {
    margin: 0;
    max-width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.sign-in-form.style-1 #tab2.tab-content .registration-step[data-step="2"] .account-type > div:has(.account-type-radio:checked) {
    border-color: #f91942;
    background: rgba(249, 25, 66, 0.06);
    box-shadow: 0 0 0 1px rgba(249, 25, 66, 0.28);
}

.sign-in-form.style-1 #tab2.tab-content .registration-step[data-step="2"] .account-type label {
    flex: 1;
    min-width: 0;
    margin: 0;
    cursor: pointer;
    font-weight: 600;
    float: none;
    width: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    text-align: left;
    line-height: 1.35;
    background-color: transparent;
    border: none;
    padding: 0;
}

.sign-in-form.style-1 #tab2.tab-content .registration-step[data-step="2"] .account-type .account-type-radio {
    flex-shrink: 0;
    margin: 0;
    accent-color: #f91942;
}

/* Listeo paints the label on :checked; cards use the outer div border instead. */
.sign-in-form.style-1 #tab2.tab-content .registration-step[data-step="2"] .account-type input.account-type-radio:checked ~ label {
    background-color: transparent;
    color: #333;
}

.sign-in-form.style-1 #tab2.tab-content .registration-step[data-step="2"] .account-type input.account-type-radio:checked ~ label i {
    color: #f91942;
}


.checkboxes label {
    font-weight: 600 ;
    /* font-size: unset; */
    letter-spacing: 0.5px;
}


.lost_password a {
    margin: 0;
    color: #666;    
    font-weight: 600 ;
    font-size: 16px;
}

label span, legend span {
    font-size: unset;
    font-weight: 400;
}

body p {
    font-size: larger;
    line-height: 29px;
}


/* =============== MESSAGE CARDS ===========================*/
/* Design cycle 1: neutralize legacy grey/pink inbox paint on shell.
 * Quitox listeo owns shell message cards (white + soft depth). */

body.pmb-dashboard-shell-page .messages-inbox ul li.unread,
body.pmb-dashboard-shell-page .messages-inbox ul li:hover {
    background-color: transparent;
    margin: 0 0 10px;
    border-radius: 14px;
}

body.pmb-dashboard-shell-page .messages-inbox ul li {
    border-bottom: none;
    transition: 0.15s ease;
    background-color: transparent;
    border-radius: 14px;
    margin: 0 0 10px;
}

.messages-inbox ul li.unread,
.messages-inbox ul li:hover {
    background-color: #f4e0e0;
    margin: 12px 0;
    border-radius: 19px;
}

.messages-inbox ul li {
    border-bottom: 1px solid #eaeaea;
    transition: 0.2s;
    background-color: #e6e6e6;
    border-radius: 15px;
    margin: 11px 0;
}

.messages-container {
    background-color: unset;
    box-shadow: none;
}

body.pmb-dashboard-shell-page .messages-inbox ul li {
    background: transparent;
    border-radius: 14px;
    margin: 0 0 10px;
}

.messages-inbox ul li {
    background: #eeeeee;
    border-radius: 12px;
    margin: 12px 0;
}

@media (max-width: 768px) {
    body .messages-inbox .message-by-headline .mes_referral {
        display: none;
    }
}

.messages-headline {
    display: none;
}

@media (min-width: 992px) {
    body.light-dashboard .messages-container, body.light-dashboard .add-listing-section {
        box-shadow: none;
        border: unset;
    }
}

.messages-container-inner .messages-inbox {
    border-right: unset;
}

/* Override Listeo parent (.messages-container-inner .message-content { padding: 30px; }) */
.messages-container-inner .message-content {
    padding: 0;
}

/* Desktop: Listeo caps the inbox UL at 800px with overflow-y scroll — stacks with page scroll.
   Let the conversation list grow with the document; keep Listeo behavior below 992px. */
@media (min-width: 992px) {
    .messages-container-inner .messages-inbox ul {
        max-height: none;
        overflow-y: visible;
    }
}

.mommy-info-icon {
    font-family: 'Cooper Black', sans-serif !important;
    font-size: 35px;
    /* color: #333 !important /* reset to avoid pushing from top */;
}


.header-widget .button, .header-widget .button.border {
    display: none;
}

.user-menu .user-name:after {
    display: none;
}


#logo {
    align-content: center;
}



.user-name span:after {
    display: none;
}





/* Fill mobile: available Body Space */

:root{
  --header-h: 97px;           /* non-shell fallback; shell aliases --pmb-shell-header-h */
  --pmb-nav-h: 80px;         /* you already have this */
  --controls-bar-height: 0px; /* Set dynamically via JavaScript */
}

/* Make the content fill the *visible* space, not more (non-shell / legacy) */
.dashboard-content{
  min-height: calc(100dvh - var(--header-h) - var(--pmb-nav-h) - var(--controls-bar-height, 0px) - env(safe-area-inset-bottom));
  position: relative;
  overflow: hidden;          /* avoid 1px scrollbars from rounding */
}

/* Shell pages: geometry owned by pmb-desktop-shell-rail.css.
 * Scrollport is .pmb-content-primary — .dashboard-content must not scroll
 * (keeps .pmb-content-secondary pinned). */
body.pmb-dashboard-shell-page {
  --header-h: var(--pmb-shell-header-h, 56px);
}
body.pmb-dashboard-shell-page .dashboard-content {
  overflow: hidden !important;
}

/* Non-shell desktop: do not force a viewport-tall main column — page scroll only. */
@media (min-width: 992px) {
  body:not(.pmb-dashboard-shell-page) .dashboard-content {
    min-height: 0;
  }
}

/* Kill stray outer margins that can also cause scroll */
.dashboard-content > :first-child{ margin-top: 0; }
.dashboard-content > :last-child{  margin-bottom: 0; }

/*
 * Shell header + sticky rail: pmb-desktop-shell-rail.css.
 * Phone dock flush only:
 */
@media (max-width: 575px) {
  #pmb-mobile-nav.mobile-nav {
    bottom: 0;
    margin-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    height: calc(var(--pmb-nav-h, 80px) + env(safe-area-inset-bottom, 0px));
    background-color: var(--pmb-rail-navy, #141774);
  }
}

/* Global baseline - flexbox layout */
html, body{ 
	height: 100%; 
	margin: 0; 
	padding: 0;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
}

/*
 * Shell: lock document scroll (SoT also in pmb-desktop-shell-rail.css).
 * Do not use overflow-x:clip alone — it can reopen overflow-y in some engines.
 */
html.pmb-dashboard-shell-html,
body.pmb-dashboard-shell-page {
	overflow: hidden !important;
	display: block !important;
}

/* #wrapper: plain neutral block (Phase A — no clearance / flex / height ownership) */
#wrapper {
	margin: 0;
	padding: 0;
}
body.pmb-dashboard-shell-page #wrapper {
	margin: 0;
	padding: 0;
	/* height / flex / overflow seal owned by pmb-desktop-shell-rail.css */
}

/* Non-shell dashboard padding reset; shell padding-top owned by rail SoT */
#dashboard {
	margin: 0;
	padding: 0;
}
body.pmb-dashboard-shell-page #dashboard {
	margin: 0;
	/* padding-top: var(--pmb-shell-header-h) in pmb-desktop-shell-rail.css */
}



.user-name span {
    width: 45px;
    height: 45px;
    left: -32px;
}

@media (max-width: 1024px) {
    .user-name span {
        width: 35px;
        height: 35px;
        left: -23px;
        top: -7px;
    }
}

.header .logo a, .site-title a, a[rel="home"][title="Paramour"] {
    font-size: 36px;
    margin-left: 10px;


}

@media (max-width: 1023px) {
    .slim-mobile-menu .hws-container #logo {
        margin-top: 6px;
        margin-bottom: -10px;
    }

    .header .logo a, .site-title a, a[rel="home"][title="Paramour"] {
    font-size: 34px;
    margin-left: 9px;
    }
}


@media (max-width: 480px) {
    .slim-mobile-menu .hws-container #logo {
        margin-top: 6px;
        margin-bottom: -5px;
    }

    .header .logo a, .site-title a, a[rel="home"][title="Paramour"] {
    font-size: 30px;
    margin-left: 5px;
    }
}



/* BW Avata */

/*
.user-name span img {
    filter: grayscale(1) contrast(1.1);
}
    */



    /* PMB_PHASE1_SENTINEL */
#pmb-neg-wrap .pmb-neg-tab .badge { background:#f2f2f2; padding:2px 8px; border-radius:12px; font-size:.85em; }


/* PMB_PHASE2_BADGE */
#pmb-neg-wrap .pmb-neg-tab .badge {
  background:#f2f2f2; padding:2px 8px; border-radius:12px; font-size:.85em;
}

/* ============================================
   PMB_WHATSAPP_STYLE_CHAT_V1
   Modern WhatsApp-style chat interface
   ============================================ */

/* Message Bubbles Container — desktop: grow with page (single page scrollbar).
   Mobile/tablet: capped height + internal scroll (keyboard / short viewport). */
.message-bubbles {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  max-height: none;
  overflow-y: visible;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

@media (max-width: 991px) {
  .message-bubbles {
    max-height: 60vh;
    overflow-y: auto;
  }
}

/* Individual Message Bubble */
.message-bubble {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 75%;
  animation: messageSlideIn 0.2s ease-out;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Received Messages (Left-aligned) */
.message-bubble {
  align-self: flex-start;
}

.message-bubble .message-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.message-bubble .message-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.message-bubble .message-content-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.message-bubble .message-text {
  background: #f0f0f0;
  color: #333;
  padding: 10px 14px;
  border-radius: 18px;
  border-top-left-radius: 4px;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.message-bubble .message-text p {
  margin: 0 0 4px 0;
}

.message-bubble .message-text p:last-child {
  margin-bottom: 0;
}

.message-bubble .message-time {
  font-size: 11px;
  color: #999;
  margin-top: 4px;
  padding-left: 14px;
  opacity: 0.7;
}

/* Sent Messages (Right-aligned) */
.message-bubble.me {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.message-bubble.me .message-text {
  background: #dcf8c6;
  color: #000;
  border-top-left-radius: 18px;
  border-top-right-radius: 4px;
}

.message-bubble.me .message-content-wrapper {
  align-items: flex-end;
}

.message-bubble.me .message-time {
  padding-left: 0;
  padding-right: 14px;
  text-align: right;
}

/* WhatsApp-style Reply Form */
.message-reply-whatsapp {
  padding: 12px 16px;
  background: #f5f5f5;
  border-top: 1px solid #e0e0e0;
}

.message-reply-inner {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: #fff;
  border-radius: 24px;
  padding: 6px 12px;
  border: 1px solid #e0e0e0;
}

.message-input-whatsapp {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  font-size: 14px;
  line-height: 1.4;
  padding: 8px 0;
  max-height: 120px;
  overflow-y: auto;
  font-family: inherit;
}

.message-input-whatsapp::placeholder {
  color: #999;
}

.message-send-whatsapp {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
  padding: 0;
}

.message-send-whatsapp:hover {
  background: #20ba5a;
}

.message-send-whatsapp:active {
  transform: scale(0.95);
}

.message-send-whatsapp .send-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Loading Indicator for Older Messages */
.pmb-load-older-messages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  color: #999;
  font-size: 12px;
}

.pmb-loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #25d366;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .message-bubbles {
    max-height: 50vh;
    padding: 12px;
    gap: 10px;
  }

  .message-bubble {
    max-width: 85%;
  }

  .message-bubble .message-avatar,
  .message-bubble .message-avatar img {
    width: 32px;
    height: 32px;
  }

  .message-bubble .message-text {
    font-size: 13px;
    padding: 8px 12px;
  }

  .message-reply-whatsapp {
    padding: 10px 12px;
  }
}

/* Dark Mode Support (if theme supports it) */
@media (prefers-color-scheme: dark) {
  .message-bubble .message-text {
    background: #2a2a2a;
    color: #e0e0e0;
  }

  .message-bubble.me .message-text {
    background: #056162;
    color: #fff;
  }

  .message-reply-whatsapp {
    background: #1e1e1e;
    border-top-color: #333;
  }

  .message-reply-inner {
    background: #2a2a2a;
    border-color: #333;
  }

  .message-input-whatsapp {
    color: #e0e0e0;
  }
}

/* ============================================
   PMB_LIVE_MESSENGER_SHELL_V1 → flattened thread host
   Tokens + chat flex now live on #pmb-neg-dialogue /
   .messages-container (Listeo panes / live-messenger shell removed).
   ============================================ */

body.pmb-dashboard-shell-page.pmb-shell-detail-layer--messages #pmb-neg-card .pmb-neg-communication {
  display: contents;
}

body.pmb-dashboard-shell-page.pmb-shell-detail-layer--messages #pmb-neg-card .pmb-neg-messenger-thread .message-bubbles,
body.pmb-dashboard-shell-page.pmb-shell-detail-layer--messages #pmb-neg-card .pmb-neg-communication .message-bubbles {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  justify-content: flex-start !important;
}

/* ============================================
   Header Breakpoint Override: 1024px -> 900px
   Override Listeo parent theme's 1024px breakpoint
   to keep header large until 900px
   ============================================ */

/* Keep large header styles in the 900px-1024px range (override parent's 1024px breakpoint) */
@media (min-width: 900px) and (max-width: 1024px) {
	.hws-wrapper .header-widget {
		/* Reset to default large styles - override parent's 1024px compact styles */
		padding: 0 !important;
		display: flex !important;
		border: none !important;
		min-width: auto !important;
		height: auto !important;
	}

	.hws-wrapper .listeo-cart-container {
		margin-right: 0 !important;
	}

	.hws-wrapper .user-menu {
		margin-right: 0 !important;
	}

	.hws-wrapper #logo {
		width: auto !important;
		margin: 0 !important;
		display: block !important;
		align-items: center !important;
		max-width: none !important;
	}

	.hws-wrapper #header {
		padding: 18px 0 8px 0 !important;
	}

	.mobile-search-trigger,
	.desktop-mmenu-trigger {
		width: auto !important;
	}

	.hws-container {
		width: auto !important;
	}

	.gg-search {
		zoom: 1 !important;
	}

	.gg-close {
		height: auto !important;
		width: auto !important;
	}

	.hmb-ico:before {
		top: 0 !important;
	}

	.hmb-ico:after {
		top: 0 !important;
	}

	.hws-wrapper .user-menu ul {
		left: auto !important;
		right: auto !important;
		transform: none !important;
	}

	.hws-wrapper .listeo-cart-container .listeo-mini-cart {
		transform: none !important;
		left: auto !important;
		width: auto !important;
		right: auto !important;
	}

	.hws-wrapper .listeo-cart-container .listeo-mini-cart:before {
		left: auto !important;
	}

	.user_not_logged_in .hws-wrapper .header-widget a.sign-in:hover,
	.user_not_logged_in .hws-wrapper .header-widget a.sign-in {
		color: inherit !important;
		padding: inherit !important;
		background: inherit !important;
	}
}

/* Apply compact header styles only below 900px (instead of 1024px) */
@media (max-width: 900px) {
	.hws-wrapper .header-widget {
		padding: 0;
		display: block;
		border: none;
		min-width: 118px;
		height: 43px;
	}

	.hws-wrapper .listeo-cart-container {
		margin-right: 18px;
	}

	.hws-wrapper .user-menu {
		margin-right: -5px;
	}

	.hws-wrapper #logo {
		width: auto;
		margin: 0;
		display: flex;
		align-items: center;
		max-width: 100px;
	}

	.hws-wrapper #header {
		padding: 10px 0;
	}

	.mobile-search-trigger,
	.desktop-mmenu-trigger {
		width: 60px;
	}

	.hws-container {
		width: calc(100% - 90px);
	}

	.mobile-search-trigger,
	.desktop-mmenu-trigger {
		width: 50px;
	}

	.gg-search {
		zoom: 0.9;
	}

	.gg-close {
		height: 20px;
		width: 20px;
	}

	.hmb-ico:before {
		top: -7px;
	}

	.hmb-ico:after {
		top: -9px;
	}

	.hws-wrapper .user-menu ul {
		left: auto;
		right: 0;
		transform: translateX(66px);
	}

	.hws-wrapper .listeo-cart-container .listeo-mini-cart {
		transform: translate3d(-20%, 0, 0);
		left: 0;
		width: 250px;
		right: initial;
	}

	.hws-wrapper .listeo-cart-container .listeo-mini-cart:before {
		left: 70px;
	}

	.user_not_logged_in .hws-wrapper .header-widget a.sign-in:hover,
	.user_not_logged_in .hws-wrapper .header-widget a.sign-in {
		color: #666;
		padding: 5px 2px;
		background: transparent;
	}
}

/* ==========================================================================
   Messages / Negotiation Chrome Pass v1 — hub-tightened 2026-07-18
   Surgical token/color overrides on existing PMB_WHATSAPP_STYLE_CHAT_V1.
   No layout rewrites (display/max-width/flex left to earlier rules).
   Frozen: #send-message-from-chat, #contact-message, #conversation_id,
   #recipient, .message-send-whatsapp, #pmb-load-older-messages.
   ========================================================================== */

body.pmb-dashboard-shell-page #pmb-neg-dialogue {
	font-family: var(--pmb-font-family-body, "Outfit", system-ui, sans-serif);
	color: var(--pmb-text, #333);
}

/* Peer bubble — Quitox muted surface */
body.pmb-dashboard-shell-page .message-bubble:not(.me) .message-text {
	background: var(--pmb-surface-muted, #f3f3f3);
	color: var(--pmb-text, #333);
}

/* Own bubble — Quitox action blue (replaces WhatsApp green) */
body.pmb-dashboard-shell-page .message-bubble.me .message-text {
	background: var(--pmb-blue, #017efa);
	color: #fff;
}

body.pmb-dashboard-shell-page .message-bubble .message-time {
	color: var(--pmb-text-muted, #777);
	font-size: var(--pmb-font-size-badge, 11px);
}

/* No bubble caret; no sky plate behind avatar; no Listeo 70px avatar gutter */
body.pmb-dashboard-shell-page .message-bubble .message-text:before,
body.pmb-dashboard-shell-page .message-bubble .message-text::before,
body.pmb-dashboard-shell-page .message-bubble.me .message-text:before,
body.pmb-dashboard-shell-page .message-bubble.me .message-text::before {
	content: none !important;
	display: none !important;
}

body.pmb-dashboard-shell-page .message-bubble .message-avatar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

body.pmb-dashboard-shell-page .message-bubble .message-text,
body.pmb-dashboard-shell-page .message-bubble.me .message-text {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.pmb-dashboard-shell-page .message-bubble {
	flex-direction: column;
	gap: 0;
}

body.pmb-dashboard-shell-page .message-bubble.me {
	flex-direction: column;
}

/* Load-older chrome only — do not force display (inline/JS own visibility) */
body.pmb-dashboard-shell-page #pmb-load-older-messages.pmb-load-older-messages {
	background: var(--pmb-surface, #fff);
	color: var(--pmb-app-action, #017efa);
	border: 1px solid var(--pmb-border-sky, #dcedf9);
	border-radius: var(--pmb-radius-pill, 999px);
	font-size: var(--pmb-font-size-meta, 13px);
	font-weight: var(--pmb-font-weight-medium, 500);
}

body.pmb-dashboard-shell-page #pmb-load-older-messages.pmb-load-older-messages:hover {
	background: var(--pmb-surface-sky, #e8f6ff);
	border-color: var(--pmb-app-action, #017efa);
}

/* Composer — plain thread (outside or beside neg); IDs frozen.
 * Inside .pmb-neg-composer-field, Quitox field-group owns the surface. */
body.pmb-dashboard-shell-page .message-reply.message-reply-whatsapp {
	border-top: 1px solid var(--pmb-border-muted, rgba(0, 0, 0, 0.08));
	background: var(--pmb-surface, #fff);
}

body.pmb-dashboard-shell-page .pmb-neg-composer-field #contact-message.message-input-whatsapp,
body.pmb-dashboard-shell-page .pmb-neg-composer-field .message-input-whatsapp {
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
}

body.pmb-dashboard-shell-page .pmb-neg-composer-field #contact-message.message-input-whatsapp:focus,
body.pmb-dashboard-shell-page .pmb-neg-composer-field .message-input-whatsapp:focus {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

body.pmb-dashboard-shell-page #contact-message.message-input-whatsapp {
	border: 1px solid var(--pmb-border-default, rgba(0, 0, 0, 0.1));
	border-radius: var(--pmb-radius-pill, 999px);
	background: var(--pmb-surface-muted, #f7f7f7);
	color: var(--pmb-text, #333);
	font-family: var(--pmb-font-family-body, "Outfit", system-ui, sans-serif);
}

body.pmb-dashboard-shell-page #contact-message.message-input-whatsapp:focus {
	outline: none;
	border-color: var(--pmb-app-action, #017efa);
	box-shadow: var(--pmb-focus-ring, 0 0 0 2px rgba(1, 126, 250, 0.2));
	background: var(--pmb-surface, #fff);
}

body.pmb-dashboard-shell-page .message-send-whatsapp {
	background: var(--pmb-app-action, #017efa) !important;
	color: #fff !important;
	border: none;
	box-shadow: none !important;
	filter: none !important;
}

body.pmb-dashboard-shell-page .message-send-whatsapp:hover {
	opacity: 0.88;
}

@media (prefers-reduced-motion: reduce) {
	body.pmb-dashboard-shell-page .message-send-whatsapp {
		transition: none;
	}
}

/* END Messages Chrome Pass v1 — style.css */