/* ==========================================================
   jQuery UI CSS Framework 1.13.2  Custom Theme for CPS Live 
  =========================================================== */    
   
/* ------------------------------------------------------------
   1. Root Variables (Color Palette, Spacing, Typography)
   ------------------------------------------------------------ */   
:root {
    /* --- Color Palette --- */
    --color-blue: #0f2dff;
    --color-light-blue: #38B8C8;
    --color-red: #C84838;
    --color-pink: #C83870;
    --color-beige: #C89038;
    --color-green: #45980f;
    --color-light-green: #38C848;
    --color-light-grey: #dcdcdc;
    --color-purple: #9038C8;
    --color-light-purple: #C838B8;
    --color-dark-purple: #4838C8;
    --color-black: #383838;
    --color-grey: #707070;
    --color-silver: #C8C8C8;
    --color-yellow: #FFFF00;
    --color-dark-blue-border: #3B63ED;
    --color-border-dark: #888888;
    --color-menu-main: #A2A6DA; 

    /* --- Semantic Colors --- */
    --color-primary-ui: var(--color-blue);
    --color-secondary-ui: var(--color-light-blue);
    --color-success: var(--color-green);
    --color-danger: var(--color-red);
    --color-text-default: var(--color-black);
    --color-text-light: #fff; 
    --color-text-highlight: #ff0066; 

    /* --- Spacing & Layout --- */
    --spacing-1x: 0.25rem;
    --spacing-2x: 0.5rem;
    --word-spacing: 1rem;
    --browse-grid-cell-padding: 1rem;
    --entry-radius: 0.5rem;
    --font-weight-bold: bold;
}
       
/* ============================================================
   2. jQuery UI Component Fixes & Overrides
   ============================================================ */

.ui-dialog {
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-silver) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    background: #fff;
    /* Removed z-Index to allow jQuery UI dynamic stacking */
}                                                               


.ui-widget-overlay {
    background: rgba(15, 45, 255, 0.15) !important;
    backdrop-filter: blur(4px);
    opacity: 1 !important;  
    /* Removed z-index: 1999 !important;  to allow jQuery UI dynamic stacking */
}

.ui-dialog .ui-dialog-titlebar {
    background: var(--color-primary-ui);
    color: white;
    border: none;
    border-radius: 0;
    padding: 1rem 1.5rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ui-dialog .ui-dialog-titlebar-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    margin: 0;
    transition: background 0.2s ease;
    right: 0.75rem;
    top: 0.75rem;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
    background: var(--color-danger);
}

.ui-selectmenu-button.ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
}      
   
.ui-dialog-titlebar-closehide { display: none; }   

.ui-dialog .ui-dialog-title { min-height: 3.8rem; }  

.ui-accordion .ui-accordion-content { padding: 0; }

.ui-button {
    border: 0.15rem solid var(--color-yellow) !important;
}                                                                      

/* ============================================================
   3. Global Input & Focus States
   ============================================================ */
   
:is(input[type="text"], input[type="password"], textarea, .ui-selectmenu-button) {
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
    border: 1px solid var(--color-silver);
}     

:is(input[type="text"], input[type="password"], textarea, .ui-selectmenu-button):focus {
    border-color: var(--color-primary-ui) !important;
    outline: 2px solid var(--color-primary-ui);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(15, 45, 255, 0.2);
    background: #fff !important;
}

.ui-selectmenu-button.ui-button:hover {
    background: #f0f0f0 !important;
    border-color: var(--color-primary-ui);
} 

/* ============================================================
   4. Layout Components
   ============================================================ */

.nt-site-header {
    width: 100%;
    height: 4.5rem;
    background: rgb(0 0 0 / 20%);   
    position: relative;
    /* Removed z-index: 100;  to allow jQuery UI dynamic stacking */
}  

:is(.cpsdroppart-dropdown, .cpsdroppart-dropdownwide) {    
    height: auto;
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--color-silver);
    text-align: left;
    white-space: nowrap;
    background: var(--color-light-grey) !important;
    padding-right: 1rem;
}

.nt-responsive-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2x);
}  

.nt-responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 1rem;
  padding: var(--browse-grid-cell-padding);
}        

.nt-radio-div-buttons-hor {
    display: flex;
    flex-direction: row;
    border: none;
}

/* ============================================================
   5. Redactor / CKEditor Overrides
   ============================================================ */

.hideredactortools .redactor-toolbar a.re-button-icon { display: none; }

.setredactorbig>.redactor-box.redactor-styles-on .redactor-in {
    width: 50rem;          
    height: 21.25rem;
}

.setredactorsmall>.redactor-box.redactor-styles-on .redactor-in {
    width: 20rem;
    height: 10rem;
}   
   
/* ============================================================
   6. Branding (Logo)
   ============================================================ */  
  
.logo-image {
  width: 48px;
  height: 48px;
  object-fit: contain; 
  margin-right: 0.5rem; 
}

.logo-name, .logo-wpname {
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold); 
}

.logo-name { color: var(--color-blue); }
.logo-wpname { color: var(--color-black); } 

/* ============================================================  
   7. Responsive Rules
   ============================================================ */   
   
.nt-hide-desktop { display: block; }

.nt-button-mobile-full {
    width: 100%;
    margin-bottom: 0.5rem;
}        

/* --- Mobile Default (max 600px) --- */
@media (max-width: 600px) {   
    html { font-size: clamp(0.6rem, 1vw + 0.5rem, 0.8rem) !important; }   
    .logout-btn, .logo-name, .logo-wpname { display: none; }
}  
       
/* --- Tablet / Desktop Transition (601px+) --- */ 
@media (min-width: 601px) {
    html { font-size: clamp(0.6rem, 1vw + 0.5rem, 0.85rem) !important; }
}

/* --- Standard iPad Portrait (768px+) --- */
@media (min-width: 768px) {    
    html { font-size: clamp(0.6rem, 1vw + 0.5rem, 0.85rem) !important; }  
    .nt-responsive-stack { flex-direction: row; gap: 1.5rem; }
    .menu-button-small { max-width: 40rem; }
    .menu-button-xsmall { max-width: 25rem; }
}

/* --- Large Tablet / Small Laptop (961px+) --- */
@media (min-width: 961px) { 
     html { font-size: clamp(0.6rem, 1vw + 0.5rem, 0.85rem) !important; }  
     .nt-hide-desktop { display: none !important; }
}

/* --- Large Screens (1601px+) --- */
@media (min-width: 1601px) {
    html {
        font-size: clamp(0.6rem, 1vw + 0.5rem, 0.9rem) !important;
    }     
}

/* ============================================================
   8. Loader
   ============================================================ */
   
.cps-loader {
    width: 3rem;
    height: 3rem;
    border: 0.3rem solid var(--color-silver); 
    border-bottom-color: var(--color-blue); 
    border-radius: 50%;
    display: inline-block;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================================
   9. BUTTON SYSTEM 
   ============================================================ */

:is(.btn-base, .Next-button, .Quantity-button, .Post-button, 
    [class*="menu-button-"], .btn-phonebase, .holdbutton) {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    transition: transform 0.1s ease, filter 0.2s, background 0.2s;
    text-decoration: none;
    font-family: inherit;
    border-radius: 2rem;
    border: none;
    min-width: 2.75rem; 
    min-height: 2.75rem; 
    gap: 0.5rem;
}

:is(.btn-base, .Next-button, .Quantity-button, .Post-button, [class*="menu-button-"]):active {
    transform: scale(0.96);
    filter: brightness(0.9);
}
  
:where(.btn-base, .Next-button, .Quantity-button, .Post-button,
.menu-button-large, .menu-button-small, .menu-button-xsmall,
.extramenu-button, .cps-menu-button, .cps-mobilemenu-button):focus-visible {
    outline: 4px solid var(--color-blue);
    outline-offset: 2px;
}

.btn-phonebase {
    white-space: normal;
    word-wrap: break-word;
    border-radius: 2rem;
    flex-shrink: 0;
    background: var(--color-silver);
    color: white;
}

.btn-phone { width: 9rem; height: 6rem; font-size: 0.75rem !important; }       
.btn-phonesmall { width: 8rem; height: 4.5rem; font-size: 0.65rem !important; }       

.btn-phoneextrasmall, .extramenu-button {   
    width: 6rem; height: 3.5rem; font-size: 0.85rem;   
    flex-shrink: 0; font-weight: 300; color: white;
    background: var(--color-primary-ui);
}

.Next-button {   
    padding: 0.8rem 1rem; min-width: 8rem; width: 100%; max-width: 12rem;
    color: #fff; background: var(--color-primary-ui); border-color: var(--color-primary-ui);
}

.Post-button {
    width: 100%; max-width: 18.75rem; padding: 1rem; color: white;
    background: var(--color-success); border-color: var(--color-success);
    font-weight: var(--font-weight-bold);
}

.holdbutton { width: 100%; max-width: 10rem; font-size: 1.25rem; color: white; background: var(--color-danger); }

.Quantity-button { width: 9.4rem; padding: 1rem 1.5rem; color: var(--color-black); background: var(--color-secondary-ui); }

.menu-button-large { width: 15rem; min-height: 8rem; padding: 1rem 1.5rem; font-size: 1.4rem; font-weight: 300; line-height: 1.2; color: #ffffff; background: var(--color-dark-purple); }
   
.menu-button-small, .menu-button-xsmall { width: 100%; max-width: 100%; padding: 1rem 1.5rem; line-height: 1.2; background: var(--color-primary-ui); color: #fff; margin-bottom: 0.5rem; }

.cps-mobilemenu-button, .cps-menu-button { width: 98% !important; min-height: 3rem; color: white; padding-left: 1.5rem; border-radius: 1rem; font-size: 1rem; font-weight: 300; margin-top: 0rem; margin-bottom: 0rem; }

.cpssmallbutton { margin-left: 0.25rem; margin-right: 0.25rem; padding-left: 0; padding-right: 0; width: 2rem; }
.cpssmallmenubutton { width: 6rem; font-size: 0.6rem; }
.phoneplannerbutton { width: 5rem; font-size: 0.5rem; }   

/* ------------------------------------------------------------
   13. Colour Utilities
   ------------------------------------------------------------ */
   
.colourblue    { background: var(--color-blue); color: white; }
.colourpink    { background: var(--color-pink); color: white; }
.colourgrey    { background: var(--color-grey); color: white; }
.coloursuccess { background: var(--color-success); color: white; }
.colourbeige   { background: var(--color-beige); color: white; }
.colourpurple  { background: var(--color-purple); color: white; }     

/* ------------------------------------------------------------
   14. Header Actions
   ------------------------------------------------------------ */

.logout-btn {  
    position: absolute; right: 1rem; top: 2rem; transform: translateY(-50%);
    background: #d9534f; color: #fff; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; font-size: 1rem;
}

.logout-btn:hover { background: #c9302c; }

/* ------------------------------------------------------------
   15. Misc UI & Dropdowns
   ------------------------------------------------------------ */
          
.scroll-container { width: 21.8rem; height: 12.5rem; overflow-y: scroll; scroll-behavior: smooth; }  
.cpsyoutube { width: 100%; max-width: 43.75rem; min-height: 25rem; aspect-ratio: 16 / 9; } 
.cpsperformance { background: var(--color-primary-ui); color: var(--color-text-light); text-align: right; font-weight: var(--font-weight-bold); }
.cpsemoji { margin-right: 0rem; padding-top: 0.25rem; padding-right: 0rem; }

.cpswidth5em { width: 5rem !important; }
.cpswidth10em { width: 10rem !important; }
.cpsphotowidth { width: 25rem !important; }

.cpspasswordbutton { position: relative; right: 6rem; background: var(--color-secondary-ui); min-width: 0.5rem; padding-left: 1rem; }

.orderentryqty>.ui-selectmenu-button.ui-button { width: 7.5rem; background: var(--color-light-grey); flex-direction: row; color: var(--color-primary-ui); padding-right: 1rem; }
.allocatependingpayment>.ui-selectmenu-button.ui-button { width: 6.25rem; background: var(--color-light-grey); text-align: right; }
.entrydroplist>.ui-selectmenu-button.ui-button { background: var(--color-light-grey); }
.cpsentrypart-dropdown { background: var(--color-light-grey) !important; }

.cpsdroppart-dropdown, .cpsdroppart-dropdownsmall, .cpsdroppart-dropdownwide { 
    overflow-y: auto; text-align: left; white-space: nowrap; background: var(--color-light-grey) !important; 
}
.cpsdroppart-dropdown { max-height: 30rem; min-width: 100%; }
.cpsdroppart-dropdownsmall { min-height: 20rem; max-width: 100%; }
.cpsdroppart-dropdownwide { min-height: 30rem; width: 30rem; }       

/* ------------------------------------------------------------
   16. Text & Form Utilities
   ------------------------------------------------------------ */
   
.cps-messageby { font-size: 0.75em !important; }
.cps-layout-tight, .cps-layout-flush { display: flex; flex-wrap: wrap; align-items: center; }
.cps-layout-tight { gap: 0.1rem; }
.cps-layout-flush { gap: 0; }
.cps-layout-tight > *, .cps-layout-flush > * { margin: 0 !important; }
   
.cpsemailfont { font-size: 0.8rem; } 
.cps-smallform-cell { display: inline-flex; justify-content: space-between; align-items: center; }
.cps-smallform-prompt { text-align: left; max-width: 5rem; }
.cpstextgreen { background: transparent; color: var(--color-blue); font-weight: var(--font-weight-bold); }
.cpshighlight { background: var(--color-primary-ui); color: var(--color-text-light); }
.cpsmobileform, .cpsplusmenu { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; }
.cpsplusmenu { min-height: 50rem; }
.cpsdisplaytext { min-height: 5rem; }
.DeliveryAddress { width: 100%; max-width: 25rem; margin-left: 0; }
.EntryBoxOption { display: inline-flex; align-items: center; justify-content: flex-start; padding: 0 1rem; font-size: 1rem; min-height: 3rem; position: relative; background: var(--color-light-grey); color: var(--color-blue); }
.noofitemstext { font-size: clamp(3rem, 3vw, 5rem); color: var(--color-primary-ui); }
.MainMenu { background: var(--color-menu-main); }
.MOBBrowseEntry { font-size: clamp(1.8rem, 3vw, 3.12rem); }
.browseentry { display: block; width: 100%; min-width: 0; padding: 0.8rem 1rem; white-space: normal; overflow-wrap: anywhere; word-break: break-word; min-height: 6em; font-size: clamp(0.75rem, 1vw + 0.5rem, 0.85rem); font-weight: 500; text-align: center; color: var(--color-text-highlight); }
.orderqtyentry { max-width: 5.3rem; background: var(--color-light-grey); color: var(--color-primary-ui); }
.PackingBrowseTable { width: 100%; border-collapse: collapse; font-size: clamp(1rem, 4vw, 3.12rem); }   
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; }
.pendingamount { background: var(--color-primary-ui); color: white; height: auto; min-height: 3rem; font-size: clamp(1.5rem, 6vw, 3.12rem); padding: 0.5rem 1rem; display: flex; align-items: center; }
.phonepicklocation, .phonepickitem { font-size: 1rem; width: 100%; max-width: 16.25rem; height: auto; min-height: 3.75rem; }
.cpsmenubutton { font-size: 0.75rem; }       
.cpspaddingleft1 { padding-left: 1rem; }
.Reset-button { color: var(--color-text-highlight); }
.RestockBrowseTable { font-size: 1.75rem; }
.stringentry { background: var(--color-light-grey); }
.TrackingNumber { font-size: clamp(1.25rem, 7vw, 2rem); }           

@media (max-width: 480px) { [class*="cpswidth"] { max-width: 100% !important; } }