:root {
  --color-primary: #00a878;
  --color-primary-hover: #009166;
  --color-primary-light: #00a576;
  --color-header-bg: #01A67B;
  --color-header-alt: #00a576;
  --color-highlight: #EAE851;
  --color-error: #FF2E2E;
  --color-error-inverted: #EAE851;
  --color-disabled: #cccccc;
  --color-disabled-border: #AAA;
  --color-disabled-placeholder: #666;
  --color-input-border: #00A576;
  --color-input-bg: #F8F8F8;
  --color-input-text: #333333;
  --color-input-placeholder: #00A576;
  --color-title: #FFF;
  --color-title-alt: #EAE851;
  --color-body: #464646;
  --color-body-dark: #222;
  --color-shadow: rgba(0,0,0,0.07);
  --color-focus: #005f4b;
}

/****************************************************************
-------------------------- GENERAL ------------------------------
****************************************************************/

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  /*overflow-x: hidden;*/
}

/***************************************************************
----------------------------- BODY ----------------------------
***************************************************************/

body {
  background-color: var(--color-title);
  color: var(--color-body);
  font-family: "Heebo", sans-serif;
  font-size: 20px;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/****************************************************************
----------------------------- HEADER ----------------------------
****************************************************************/

.main-header {
  width: 100%;
  background-color: var(--color-header-bg);
}

.main-header .header-container {
  max-width: 1700px;
  margin: 0 auto;
  padding: 18px 16px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main-header .logo img {
  display: block;
}


.organisation-logo {
    width:50px;
    height: 50px;
}

.logo--primary img,
.logo--secondary img {
  width: auto;
  height: auto;
}

@media (max-width: 767px) {
  .main-header .header-container {
    max-width: none;
    margin: 0;
    padding: 24px 20px 24px;
  }
}

@media (max-width: 365px) {
  .main-header .header-container .main-logo {
    max-width: 130px;
    height: auto;
  }
  .main-header .header-container .organisation-logo {
    max-width: 40px;
    height: auto;
  }
}



/* Menu */
.header-nav {
  flex: 1;
  text-align: center;
}

.header-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: 32px;
}

.header-nav__list a {
  color: var(--color-title); /* white */
  text-decoration: none;
  font-weight: 500;
  font-size: 18px;
  transition: opacity 0.3s;
}

.header-nav__list a:hover {
  opacity: 0.8;
}


/* Logout Item */
.header-nav__list li.menu-item-logout a {
	color: #000000;
    font-weight: bold;
    text-decoration: underline;
}


@media (max-width: 590px) {
  .main-header .header-container {
    flex-direction: column;
    align-items: center;
    padding: 18px 8px 12px; /* Tighter padding */
    gap: 8px; /* Space between rows */
  }
  .main-header .header-nav {
    flex: unset;
    text-align: center;
    width: 100%;
    margin-top: 8px; /* push down from logos */
    margin-bottom: 4px;
  }
  .main-header .header-nav__list {
    gap: 18px; /* smaller gap between menu items */
  }
  .main-header .main-logo,
  .main-header .organisation-logo {
    margin: 0 auto;
    display: block;
    /* Optionally, shrink further on small screens: */
    max-width: 120px;
    height: auto;
  }
} /* 590 */



@media (max-width: 480px) {
  .main-header .main-logo,
  .main-header .organisation-logo {
    max-width: 90px;
  }
  .header-nav__list a {
    font-size: 15px;
  }
} /* 480 */



/****************************************************************
------------------------- Main Layout --------------------------
****************************************************************/

.main-container { 
  max-width: 1700px; 
  margin: 0 auto;  
  padding: 50px;
  /*height: calc(100vh - 200px);*/
}

/********************************************************
------------------------- Views -------------------------
*********************************************************/

/* Views -> Login  ----------------------------*/
/***********************************************/

.login-view-container {
  display: flex;
  max-width: 1700px;
  background: var(--color-header-alt);
  margin: 0 auto;
}

/* ====== Left Side (Green area) ====== */

.login-view-container__left {
  position: relative;
  background: var(--color-header-alt);
  flex: 1.15;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  min-width: 0;
  min-height: 43vw;
}

.login-view-container__houses {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  height: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.login-view-container__bus {
  position: absolute;
  right: 0;
  left: 0;
  bottom: -12%;
  margin: 0 auto;
  width: 38.75vw;
  max-width: none;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  padding-bottom: 32px;
}

/* Main content inside green area */
.login-view-container__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 40px 0 32px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Title */
.login-view-container__title {
  text-align: center;
  margin-bottom: 42px;
}

.login-view-container__title--white {
  display: block;
  color: var(--color-title);
  text-align: center;
  font-family: Heebo;
  font-size: 6.5354vw;
  font-style: normal;
  font-weight: 800;
  line-height: 97%;
}
.login-view-container__title--yellow {
  display: block;
  color: var(--color-title-alt);
  font-family: Heebo;
  font-size: 6.5354vw;
  font-style: normal;
  font-weight: 400;
  line-height: 97%;
}

/* ====== Right Side (Form area) ====== */
.login-view-container__right {
  background: var(--color-title);
  flex: 0.85;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  min-width: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 140px;
}

.login-form {
  width: 100%;
  max-width: 410px;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 30px 40px;
}

.login-form__icon {
  width: 6.6667vw;
  height: 6.6667vw;
  background: var(--color-title);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px var(--color-shadow);
}

.login-form__icon img {
  width: 100%;
  height: auto;
}

.login-form__welcome {
  text-align: center;
}

.login-form__greeting {
  display: block;
  color: var(--color-body);
  text-align: center;
  font-family: Heebo;
  font-size: 3.4106vw;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.login-form__text {
  color: var(--color-body);
  font-family: Heebo;
  font-size: 2.1316vw;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0;
}

/* Form styles */
.login-form__form {
  width: 100%;
  margin-top: 16px;
}

.login-form__input-group {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 16px;
}

.login-form__input {
  flex: 1;
  height: 44px;
  padding: 0 44px 0 16px;
  font-size: 20px;
  border-radius: 28px;
  border: 1.5px solid var(--color-input-border);
  background: var(--color-input-bg);
  outline: none;
  transition: border 0.2s;
  direction: ltr;
  text-align: left;
  color: var(--color-body-dark);
  font-weight: 500;
}

.login-form__input:focus {
  border: 1.5px solid var(--color-primary-hover);
  background: var(--color-title);
}

.login-form__input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}


.login-form__resend {
    display: block;
    margin-top: 50px;
    
    color: var(--color-body);
    text-align: center;
    font-family: Heebo;
    font-size: 20.212px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
}


/* Responsive styles */

/* Hi-Res screens */
@media (min-width: 1921px) and (max-width: 3840px) { 
  .login-form__greeting {
    font-size: 2vw;
  }
  .login-form__text {
    font-size: 1.1316vw;
  }
  .login-view-container__title--white {
    font-size: 5.5354vw;
  }
  .login-view-container__title--yellow {
    font-size: 4.5354vw;
  }
}

/* Tablet down */
@media (max-width: 1025px) {
  .main-container {
    padding: 0;
    height: auto;
  }
  .login-view-container {
    flex-direction: column;
  }
  .login-view-container__content {
    display: none;
  }
  .login-view-container__right {
    border-radius: 0;
  }
  .login-view-container__houses {
    display: none;
  }
  .main-container {
    display: flex !important;
    flex-direction: column;
    min-height: 100vh;
    height: 100vh;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .login-view-container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    height: 100%;
    box-sizing: border-box;
  }
  .login-view-container__right {
    width: 100%;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .login-view-container__left {
    flex: 0 0 auto;
    width: 100vw;
    background: var(--color-header-alt);
    height: 180px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .login-view-container__bus {
    width: 70vw;
    max-width: 420px;
    min-width: 180px;
    margin: 0 auto;
    display: block;
    position: absolute;
    padding: 0;
    top: -48%;
  }
  .login-view-container__houses {
    display: none !important;
  }
  .login-form__icon { order: 2; }    
  .login-form__welcome { order: 1; }
  .login-form__form { order: 3; }
  .login-form { padding-top: 15px; margin-bottom: 18%; }
  .login-form__icon { width: 20vw; height: 20vw; margin: 5px 0; margin-bottom: 20px; }
  .login-form__greeting { font-size: 9.3458vw; }
  .login-form__text { font-size: 5.8411vw; }      
  .login-view-container__left { min-height: 39vw; }


  .login-view.login-step-verify .login-view-container__right {
    background: var(--color-header-bg);    
  }
  
  
  .login-view.login-step-verify .login-form__text {
    color: var(--color-title);
    font-size: 5.8411vw;
    margin-bottom: 20px;
  }
  
  
  .login-view.login-step-verify .login-view-container__left {
    display: none;
  }
  
  
  .login-view.login-step-verify .login-form__resend {
    color: var(--color-title);
  }
  
  
  .login-view.login-step-verify .login-form {
        padding-top: 40px;
        margin-bottom: 0;
  }

  .login-view.login-step-verify .input-wrapper--error {
    
  }
  
  
   .login-form__icon {
        background: transparent !important;
        box-shadow: none !important;
  }

} /* max-width: 1025px */



/* Views -> Products  --------------------------*/
/***********************************************/


.products-view-container {
    max-width: 1700px;
    margin: 0 auto;  
}



/* ------------------------------------------------------------------
   Product Groups
   ------------------------------------------------------------------ */

.product-group__title {
    color: var(--color-primary);
    text-align: center;
    margin: 0;
    padding-top: 15px;
}

.product-group__description {
    text-align: center;
}

.product-group__description p {
    margin: 0;
}


.basket-container {
    padding-bottom: 80px;
}


.basket-container  .product-group {
    border-bottom: 1px solid #c5bbbb;
    padding-bottom: 0;
}



.basket-container .product-group:first-child { 
    
}


.basket-container .product-group:last-of-type { 
    border: none;
}


.info-highlight{
    display:inline-block;
    margin:10px 0;
    padding:2px 6px;
    background:#ffe964;
    border-radius:4px;
    font-weight:bold;
    text-align: center;
    margin: 0 auto;
}


/* ------------------------------------------------------------------
   Product Card – core styles
   ------------------------------------------------------------------ */

.product-card {
    display:flex;
    align-items:flex-start;
    gap:40px;
    min-width:700px;
    padding:24px 32px;
    margin-bottom:32px;
    background:#fff;
}



.product-content{ flex:1; }

/* Product image -------------------------------------------------- */
.product-image{
    width:533px;
    height:533px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:18px;
    background:#dadada;          /* fallback colour ‒ shows before img loads */
}
.product-image img{
    width:100%;
    height:100%;
    object-fit:contain;          /* show whole image, never crop */
}

/* Title + number ------------------------------------------------- */
.product-title{
    display:inline-flex;         /* keep number + text on the same line */
    align-items:center;
    gap:.6em;
    margin:0 0 10px;
    font-size:1.45rem;
    font-weight:bold;
}
.product-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    flex-shrink:0;               /* never let the circle collapse */
    border:3.72px solid #01A67B;
    border-radius:50%;
    color:#01A67B;
    font-weight:bold;
    font-size:1.7rem;
    line-height:1;
}

/* Quantity / variation groups ----------------------------------- */
.quantity-group,
.variation-group { margin:22px 0; }



.quantity-btn,
.variation-btn{
    display:inline-block;
    margin-left: 7px;
    margin-bottom: 12px;
    font-size:1.3rem;
    background:#fff;
    border:1px solid #d7d7d7;
    border-radius:8px;
    cursor:pointer;
    transition:background-color .3s ease,
               color            .3s ease,
               border-color     .3s ease;
               
    /*width: 55px;*/
    min-width: 55px;
    height: 55px;
    text-align: center;           
}

/*.quantity-btn:hover,*/
/*.variation-btn:hover,*/
.quantity-btn.active,
.variation-btn.active {
    background:#23b09c;
    border-color:#23b09c;
    color:#fff;
}

/* Active state */
.quantity-btn.active,
.variation-btn.active {
  background: #23b09c;
  border-color: #23b09c;
  color: #fff;
}

/* Hover only on devices that support it */
@media (hover: hover) and (pointer: fine) {
  .quantity-btn:hover,
  .variation-btn:hover {
    background: #23b09c;
    border-color: #23b09c;
    color: #fff;
  }
}



.quantity-group label,
.variation-group label {
    display: block;
    margin-bottom: 15px; 
}


.quantity-btn.button--disabled,
.variation-btn.button--disabled {
    background: var(--color-disabled);
    border-color: var(--color-disabled-border);
    color: #fff;
    cursor: not-allowed;
    opacity: .65;
}

.quantity-group[dir="ltr"],
.variation-group[dir="ltr"] {
    text-align:right;
}

.quantity-group[dir="ltr"] label,
.variation-group[dir="ltr"] label { 
    direction: rtl;
}


@media (max-width: 1025px) {
    
    .quantity-group,
    .variation-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-bottom: 20px;
    }
    
    /* Center labels above buttons */
    .quantity-group label,
    .variation-group label {
      width: 100%;
      text-align: center;
      margin-bottom: 10px;
    }
    
    /* Align the whole group (quantity + size) centrally inside product card */
    .product-content {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .quantity-btn, 
    .variation-btn {
        margin-bottom: 0;
    }

} /* 1025 */


/* ------------------------------------------------------------------
   Responsive tweaks ≤ 850 px
   ------------------------------------------------------------------ */
@media (max-width:850px){
    .product-card{
        flex-direction:column-reverse;
        min-width:0;             /* allow card to shrink */
    }
    .product-content{ order:-1; }/* put content above the image   */
    .product-image{
        width:100%;
        height:auto;
        aspect-ratio:1/1;        /* keep square ratio */
    }

    /* Optional mobile-only variant of the title */
    .product-title.mobile{ display:block; }
}



.finish-button-container {
    text-align: center;
}

#finishOrder.loading {
    pointer-events : none;
    opacity        : .6;
    position       : relative;
}
#finishOrder.loading::after {          /* simple spinner */
    content      : '';
    position     : absolute;
    inset        : 0;
    margin       : auto;
    width        : 1em;
    height       : 1em;
    border       : .15em solid currentColor;
    border-right : .15em solid transparent;
    border-radius: 50%;
    animation    : spin .75s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }



/**********/



.order-confirmation {
  position: relative;
  min-height: 100vh;
  
  overflow: hidden;
  background: var(--color-header-bg);
  direction: rtl;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

.confirmation-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 427px;
  min-height: 320px;
  background: url('/wp-content/themes/worker/assets/dist/images/frontend/views/order-complete/order-complete-bg-bottom.svg') no-repeat bottom center;
  background-size: cover;
  pointer-events: none;
  z-index: 1;
}


/* New layer for the bus image */
.confirmation-bus {
    position: absolute;
    bottom: 16%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 100%;
    max-height: 500px;
    background: url(/wp-content/themes/worker/assets/dist/images/frontend/views/order-complete/order-complete-bus.svg) no-repeat center center;
    background-size: contain;
    pointer-events: none;
    z-index: 2;
}

/* Views -> Order Complete  --------------------*/
/***********************************************/

/* Main Text Content */
.confirmation-main {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 60px;
  margin-bottom: 40px;
}

.confirmation-title {
  color: #EAE851;
  font-family: 'Heebo', sans-serif;
  font-size: 63.48px;
  font-style: normal;
  font-weight: 700;
  margin-bottom: 0;
}
.confirmation-subtitle {
  color: #FFF;
  font-family: 'Heebo', sans-serif;
  font-size: 51.48px;
  font-style: normal;
  font-weight: 400;
  line-height: 97%;
  margin-bottom: 0;
  margin-top: 0;
  max-width: 61%;
  margin: 0 auto;
}

.confirmation-buttons {
  position: absolute;
  bottom: 54px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  z-index: 3;
  padding: 0 54px;
  box-sizing: border-box;
}

.confirmation-buttons a {
    text-decoration: none;
}

.confirmation-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 38px;
  border: 2px solid #FFF;
  border-radius: 32px;
  background: transparent;
  color: #FFF;
  font-family: 'Heebo', sans-serif;
  font-size: 22.467px;
  font-style: normal;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  outline: none;
  min-width: 220px;
  justify-content: center;
}

.confirmation-btn .wa-icon {
  width: 28px;
  height: 28px;
  margin-right: 8px;
}
.support-btn {
  flex-direction: row-reverse;
}
.confirmation-btn:hover,
.confirmation-btn:focus {
  background: rgba(255,255,255,0.12);
  color: #FFF;
}


.whatsapp-icon {
  max-width: 33px;  
}


.bus-image {
    display: none;
}


.confirmation__order-pickup,
.confirmation__order-number {
    display: block;
    color: #EAE851;
    font-family: 'Heebo', sans-serif;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 0;
    margin-top: 10px;
}


.confirmation__order-pickup {
    margin-top: 0;
    line-height: 1em;
}


.order-summary-actions .btn-whatsapp img {
    filter: invert(59%) sepia(20%) saturate(7500%) hue-rotate(145deg);
    vertical-align: bottom;
    max-width: 24px;
    float: right;   
}

.order-summary-actions .btn-whatsapp:hover img {
    filter:none;
}

/* Desktop stays the same. Only these changes for mobile. */
@media (max-width: 1025px) {
    
  .main-container.view-order-complete {
    height: auto;
    min-height: auto;
  }  
    
  .order-confirmation {
    background: #fff !important; /* Remove green bg on mobile */
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px;
  }
  .confirmation-bg {
    display: none !important; /* Hide green bus bg on mobile */
  }
  .confirmation-main {
    margin-top: 32px;
    padding: 0 10px;
    width: 100%;
    max-width: 400px;
  }
  .confirmation-title {
    color: #464646;
    font-family: 'Heebo', sans-serif;
    font-size: 38px;
    font-style: normal;
    font-weight: 800;
    line-height: 33px;
    margin-bottom: 18px;
  }
  .confirmation-subtitle {
    color: #464646;
    font-family: 'Heebo', sans-serif;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: 33px;
    margin-bottom: 24px;
    max-width: 100%;
  }
  .bus-mobile-img {
    display: block;
    width: 90%;
    max-width: 340px;
    margin: 0 auto 28px auto;
    height: auto;
  }
  .confirmation-buttons {
    position: static;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    margin-top: 0;
    padding: 0;
  }
  .confirmation-btn {
    min-width: 180px;
    border: 2px solid var(--color-header-bg);
    color: var(--color-header-bg);
    font-family: 'Heebo', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    border-radius: 32px;
    padding: 14px 0;
    background: #fff;
    transition: background 0.18s, color 0.18s;
    justify-content: center;
    gap: 10px;
  }
 .confirmation-btn .whatsapp-icon {
    width: 28px;
    height: 28px;
    margin-right: 6px;
    margin-left: 0;
    
    /* This filter matches var(--color-header-bg)*/
    filter:invert(40%) sepia(97%) saturate(350%) hue-rotate(124deg) brightness(67%) contrast(123%);
    transition: filter 0.18s;
    
  }
  .confirmation-btn:hover, .confirmation-btn:focus {
    background: var(--color-header-bg);
    color: #fff;
    border: 2px solid var(--color-header-bg);
  }
  .confirmation-btn:hover .whatsapp-icon,
  .confirmation-btn:focus .whatsapp-icon {
    filter: brightness(0) invert(1);
  }
  
  .bus-image {
    display: block;
    width: 90%;
    margin: 50px auto 22px;
  }
  
  
  .confirmation__order-pickup,
  .confirmation__order-number {
    color: #464646;
  }
  
} /* 1025 */




/* Views -> Order Summery  --------------------*/
/***********************************************/

.order-summary-container {
    text-align: center;
    padding: 40px 20px;
    direction: rtl;
    background-color: #f8f9fa;
}

.order-summary-header h2 {
    font-size: 28px;
    color: #00a885;
    margin-bottom: 10px;
}

.order-summary-header p {
    font-size: 18px;
    color: #555;
}

.order-summary-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
}

.order-summary-item {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 20px;
    width: 260px;
    text-align: center;
}

.item-image img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.item-details h3 {
    margin: 0 0 10px;
    font-size: 20px;
    color: #333;
}

.item-details p {
    margin: 5px 0;
    font-size: 16px;
    color: #666;
}

.order-summary-actions {
    margin-top: 40px;
}

.order-summary-actions .btn {
    display: inline-block;
    padding: 12px 24px;
    margin: 0 10px;
    font-size: 16px;
    border-radius: 25px;
    border: 2px solid #00a885;
    color: #00a885;
    background-color: transparent;
    text-decoration: none;
    transition: all 0.3s ease;
}

.order-summary-actions .btn:hover {
    background-color: #00a885;
    color: #fff;
}

.order-summary-actions a:first-child {
    margin-bottom: 20px;
}


/****************************************************************
------------------------- Components ----------------------------
****************************************************************/

/* === Base Button Styles === */
.button {
  font-family: "Heebo", sans-serif;
  font-weight: bold;
  font-size: 24px;
  text-align: center;
  color: var(--color-title);
  display: inline-block;
  box-sizing: border-box;
  padding: 14px 32px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.button--full-width {
  width: 100%;
  min-width: 100%;
}

.button--wide {
  min-width: 280px;
}

.button--small {
  font-size: 18px;
  padding: 10px 20px;
}

.button--active {
  background-color: var(--color-primary);
}
.button--active:hover {
  background-color: var(--color-primary-hover);
}
.button--disabled,
.button:disabled {
  background-color: var(--color-disabled);
  color: var(--color-title);
  cursor: not-allowed;
  opacity: 0.7;
}
.button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
.button--rounded {
  border-radius: 9999px;
}
.button--semi-rounded {
  border-radius: 0 32px 0 32px;
}

.button--inverted {
  background-color: var(--color-title);
  color: var(--color-body);
}



@media (max-width: 1025px) {


    .button--inverted-mobile {
      background-color: var(--color-title);
      color: var(--color-body);
    }

    
}


/* Components -> Input Field  ----------------------*/
/****************************************************/

.input-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--color-border, var(--color-input-border));
  border-radius: 9999px;
  padding: 12px 16px;
  background-color: transparent;
  transition: border-color 0.3s ease;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
}
.input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: "Heebo", sans-serif;
  font-size: 20px;
  text-align: center;
  color: var(--color-input-text);
  outline: none;
  padding: 0;
}
.input::placeholder {
  font-family: "Heebo", sans-serif;
  color: var(--color-placeholder);
  text-align: center;
  opacity: 1;
}
.input-icon {
  display: flex;
  align-items: center;
}

/* === Input States === */
.input-wrapper--default {
  --color-border: var(--color-input-border);
  --color-placeholder: var(--color-input-placeholder);
  --color-input-text: var(--color-input-text);
}

.input-wrapper--filled {
  --color-border: var(--color-input-border);
  --color-placeholder: var(--color-input-text);
  --color-input-text: var(--color-input-text);
}
.input-wrapper--error {
  --color-border: var(--color-error);
  --color-placeholder: var(--color-error);
  --color-input-text: var(--color-error);
}
.input-wrapper--disabled {
  --color-border: var(--color-disabled-border);
  --color-placeholder: var(--color-disabled-placeholder);
  --color-input-text: var(--color-disabled-placeholder);
  cursor: not-allowed;
  opacity: 0.6;
}
.input-wrapper--full-width {
  width: 100%;
  max-width: 100%;
}
.input-wrapper--disabled .input {
  cursor: not-allowed;
}
.input-wrapper--disabled .input-icon svg path {
  fill: var(--color-disabled-border);
}
.input-wrapper--error .input-icon svg path {
  fill: var(--color-error);
}




.input-wrapper--inverted {
  --color-border: var(--color-error-inverted);
  --color-placeholder: var(--color-error-inverted);
  --color-input-text: var(--color-error-inverted);
}


.input-wrapper--inverted .input::placeholder {
  color: var(--color-error-inverted);
}

.input-wrapper--inverted.input-icon svg path {
  fill: var(--color-title);
}



@media (max-width: 1025px) {

    .input-wrapper--transparent-mobile {
      background-color: var(--color-header-bg);
      border-color: var(--color-title);
      --color-placeholder: #EAE851;
      --color-input-text: var(--color-title); 
    }
    
    .input-wrapper--transparent-mobile .input::placeholder {
      color: #EAE851;
    }
    
    .input-wrapper--transparent-mobile .input-icon svg path {
      fill: var(--color-title);
    }
    
    
    .login-step-verify .input-wrapper--error {
        --color-border:       var(--color-error-inverted);
        --color-placeholder:  var(--color-error-inverted);
        --color-input-text:   var(--color-error-inverted);
    }

    .login-step-verify .input-wrapper--error .input::placeholder {
        color: var(--color-error-inverted);
    }

    .login-step-verify .input-wrapper--error .input-icon svg path {
        fill: var(--color-title);
    }
    
    
    .login-step-verify .input-wrapper--transparent {
      background-color: var(--color-header-bg);
      border-color: var(--color-title);
      --color-placeholder: #EAE851;
      --color-input-text: var(--color-title); 
    }
    
    .login-step-verify .input-wrapper--transparent .input::placeholder {
      color: #EAE851;
    }
    
    .login-step-verify .input-wrapper--transparent .input-icon svg path {
      fill: var(--color-title);
    }
    
}





/* Error Notice ----------------------*/
/**************************************/

.error-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-error);
  font-family: "Heebo", sans-serif;
  font-size: 22px;
  font-style: normal;
  line-height: 1.4;
  margin-bottom: 6px;
}


.error-notice:before {
    content:'';
    width: 20px;
    height:20px;
    background: url("/wp-content/themes/worker/assets/dist/images/frontend/components/error/error.svg") no-repeat;
    background-size: contain;
}


.error-notice--centred {
  justify-content: center;    
}


.error-notice--longtext {
    color: var(--color-body);
    font-size: 17px;
    font-weight: 400;
    margin-top: 15px;
}



@media (max-width: 1025px) {
 
  .error-notice {   
    width: 100%;
    justify-content: center;  
  }
    


.error-notice--longtext {
    margin: 15px auto 0;
    max-width: 320px;
}    
    
.error-notice--longtext:before {
    min-width: 40px;
}

    
} /* 1025 */



/********************************************************
------------------------- Pages  -------------------------
*********************************************************/

/* 404 */

.error404 {
    background: var(--color-primary);
    color: #fff;
}

.error404 .main-header {
    display: none;
}

.error404 #main-content {
    text-align: center;
    padding: 90px;
}

.error404 .error-img {
    margin-top: 60px;
}


@media (max-width: 1025px) { 
    
    
    .error404 .error-img img {
        width: 100%;
    }
    
}

/****************************************************************
------------------------ Utility Classes -----------------------
****************************************************************/

.mb-15 {
  margin-bottom: 15px;
}



/* Hide on mobile, show on desktop */
.hide-mobile {
  display: block;
}

.show-mobile {
  display: none;
}

@media (max-width: 1024px) {
  .hide-mobile {
    display: none !important;
  }
  .show-mobile {
    display: block !important;
  }
}



@media (max-width: 1025px) {
 
   .padding-sides-30-mobile {
     padding: 0 30px;
   } 
       
    
}