html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
body {
    min-height: 100dvh;
    box-sizing: border-box;
    background: url('/uploads/media/background.webp') no-repeat center center fixed;
    background-size: cover;
    font-family: 'Segoe UI', Arial, sans-serif;
    overflow-x: hidden;
}
h1 {
    color: #156943;
    font-size: 2rem;
    margin-bottom: 0;
}
h2 { 
margin-top: 0; font-size: 1.65em; margin-bottom: 24px; text-align:center; color:#219150; font-weight:800; letter-spacing:0.01em;}
input[type="text"], input[type="number"], select, textarea {
    width: 100%;
    border-radius: 7px;
    border: 1.3px solid #bbb;
    padding: 10px 9px;
    font-size: 1.06em;
    margin-bottom: 6px;
    background: #fff;
    box-sizing: border-box;
}
hr { border: none; border-top:1px solid #000000; margin:17px 0;}
td:not(.label) {
    color: #000 !important; 
 text-align: left;
 }
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
table td:not(.label) {
  width: 58%;
   white-space: normal; word-break: break-word;
}
.container {
    position: relative;
    margin: 60px auto 60px auto;
    max-width: 420px;
    padding: 1rem 1rem 1rem 1rem;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(12px);
    border-radius: 22px;
    box-shadow: 0 6px 32px #0002;
    text-align: center;
    width: 100%;
}
.container .btn:first-of-type {
    margin-top: -20px;
}
.logo {
    width: 120px;
    margin-top: -30px;
}
.btn {
    position: relative;
    display: flex;
    align-items: center;
    width: 80%;
    padding: 0.7em 0;
    margin: 10px auto;
    font-size: 1.06em;
    font-weight: 500;
    background: #238551;
    color: #fff;
    border: none;
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0 2px 8px #45b36b33;
    overflow: hidden;
}
.btn .btn-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn .btn-text {
    width: 100%;
    text-align: center;
    pointer-events: none;

}
.btn .btn-icon img {
    max-width: 32px;
    max-height: 32px;
    display: block;
}
.btn:hover {
    background: linear-gradient(90deg,#45b36b 50%,#3fcfa7 100%);
    transform: translateY(-2px) scale(1.045);
    box-shadow: 0 8px 24px #45b36baa, 0 0px 18px #3fcfa744;
}
.td { padding: 9px 0; vertical-align: top; white-space: normal; word-break: break-word;}
.td.label {
  width: 42%;
  text-align: left;
}
.label { color: #000000; font-weight: 500; text-align: left;}
.box { margin: 20px 0; background: #f3faf7; border: 1.3px solid #d2eae2; border-radius: 10px; padding: 17px 13px; }
.box-title { color: #000000; font-weight: 700; font-size: 1.12em; margin-bottom: 7px; letter-spacing:0.02em;}
.payment-link { word-break: break-all; color: #1769aa; background: #e1f5fe; display: block; padding: 13px 10px; border-radius: 6px; text-align: center; font-weight: bold; margin-top: 6px; text-decoration: none; border: 1px solid #b3e5fc; font-size:1.15em;}
.payment-link:hover { background: #bbdefb; color:#114477;}
.section-header { font-weight:bold; background:#f6fff9; padding:6px 12px; border-radius:7px; margin: 8px 0 8px 0; font-size:1.07em; letter-spacing:0.01em; border-left:4px solid #26a69a; color: #ffffff;}
.main-highlight { background:#fffbe7 !important; border:2px solid #ffe082 !important; }
.delivery-dates-list { font-size: 0.99em; color: #222; margin: 0 0 0 0; padding: 0; }
.delivery-dates-list li { padding: 2px 0 2px 8px; list-style-type: disc; margin-left: 1em; }
.status-paid { color: #00e600; font-weight:700; }
.status-pending { color: #ff3333; font-weight:700; }
.center {text-align:center;}
.wa-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 99;
    background: #25D366;
    border-radius: 50%;
    box-shadow: 0 3px 16px #0003;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    animation: wa-pulse 1s infinite;
}
.wa-float:hover { background: #20b358; }
.wa-float img { width: 37px; height: 37px; }
@keyframes wa-pulse {
	0% { box-shadow: 0 0 0 0 #25d36677; }
    70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.ig-float {
    position: fixed;
    left: 22px;           /* Align left */
    bottom: 22px;
    z-index: 99;
    background: linear-gradient(45deg, #fd5949 0%, #d6249f 50%, #285AEB 100%);
    border-radius: 50%;
    box-shadow: 0 3px 16px #0003;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    animation: ig-pulse 1s infinite;
}
.ig-float:hover {
    background: linear-gradient(45deg, #e1306c 0%, #833ab4 50%, #285AEB 100%);
}
.ig-float img {
    width: 29px;
    height: 29px;
}
@keyframes ig-pulse {
    0% { box-shadow: 0 0 0 0 #fd594966; }
    70% { box-shadow: 0 0 0 16px rgba(253,89,73,0); }
    100% { box-shadow: 0 0 0 0 rgba(253,89,73,0); }
}
.labelclient { margin: 20px 0; padding: 1px 1px; }
.mobile-field-group {
    margin: 22px 0 20px 0;
    text-align: left;
}
.mobile-label {
    display: block;
    font-weight: 600;
    color: #156943;
    letter-spacing: 0.01em;
    font-size: 1.04em;
}
.mobile-input-wrapper {
    display: flex;
    align-items: center;
    background: #f6fcfa;
    border: 1.5px solid #c7ebe0;
    border-radius: 9px;
    padding: 2px 8px 2px 0;
    box-shadow: 0 2px 6px #27a84414;
}
.country-code {
    padding: 0 10px;
    font-size: 1.11em;
    font-weight: bold;
    color: #197d5a;
    background: none;
    border: none;
    letter-spacing: 1px;
    min-width: 52px;
    text-align: center;
}
.mobile-input-wrapper input[type="text"] {
    border: none;
    background: transparent;
    flex: 1 1 0;
    padding: 11px 8px;
    font-size: 1.1em;
    color: #143d2d;
    outline: none;
    border-radius: 0 9px 9px 0;
}
.mobile-input-wrapper input[type="text"]:focus {
    background: #eefaf6;
}
.btn-login {
    background: linear-gradient(90deg, #219150 60%, #34e78b 100%);
    color: #fff;
    font-size: 1.13em;
    border: none;
    border-radius: 9px;
    padding: 15px 0;
    box-shadow: 0 2px 12px #27a84422;
    font-weight: 700;
    text-align: center;
    width: 100%;
    display: block;
    transition: background 0.18s, transform 0.12s;
}
.btn-login:hover {
    background: linear-gradient(90deg, #176b3e 60%, #4df0b1 100%);
    transform: translateY(-2px) scale(1.035);
}
.register-label {
    display: block;
    font-weight: 600;
    color: #156943;
    margin-bottom: 5px;
    letter-spacing: 0.01em;
    font-size: 1.04em;
}
.register-field-group input {
    width: 100%;
    padding: 11px 8px;
    margin-bottom: 4px;
    border: 1.3px solid #c7ebe0;
    border-radius: 7px;
    font-size: 1.05em;
    background: #f7fdfb;
    box-sizing: border-box;
    min-height: 44px;
    font-size: 1em;
}
.register-field-group select {
    width: 100%;
    padding: 11px 8px;
    margin-bottom: 4px;
    border: 1.3px solid #c7ebe0;
    border-radius: 7px;
    font-size: 1.05em;
    background: #f7fdfb;
    box-sizing: border-box;
    min-height: 44px;
    font-size: 1em;
}
.register-field-group textarea {
    width: 100%;
    padding: 11px 8px;
    margin-bottom: 4px;
    border: 1.3px solid #c7ebe0;
    border-radius: 7px;
    font-size: 1.05em;
    background: #f7fdfb;
    box-sizing: border-box;
    min-height: 44px;
    font-size: 1em;
}
.register-field-group {
    margin-bottom: 8px;
    text-align: left;
}
.register-field-group label {
    font-weight: 600;
    margin-bottom: 2px;
    display: block;
    color: #143d2d;
}
.register-field-group > div {
    margin-top: 7px;
}
.success, .register-error {
    padding: 13px 18px;
    margin-bottom: 15px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.12em;
}
.success { background: #e7fbe7; color: #127c28; border: 1.5px solid #41df8e; }
.register-error { background: #ffebeb; color: #ae2121; border: 1.5px solid #ff9696; }
.optional-fields-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0px;
}
.optional-field {
    flex: 1 1 0px;
    align-items: flex-start;
    min-width: 170px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    font-size: 1em;
}
.optional-field-full {
    flex: 1 1 100%;
    max-width: 100%;
}
.optional-field label {
    font-weight: 500;
    margin-bottom: 2px;
    color: #19543c;
}
.toggle-field {
    width: 100%;
    display: block;
}
.toggle-field select {
    width: 100%;
    padding: 9px 10px;
    border-radius: 8px;
    border: 1.4px solid #bbb;
    background: #fff;
    margin-top: -5px;
    font-size: 1.05em;
    color: #143d2d;
    box-sizing: border-box;
}
.toggle-field input {
    width: 100%;
    padding: 9px 10px;
    border-radius: 8px;
    border: 1.4px solid #bbb;
    background: #fff;
    margin-top: -5px;
    font-size: 1.05em;
    color: #143d2d;
    box-sizing: border-box;
}
.toggle-field textarea {
    width: 100%;
    padding: 9px 10px;
    border-radius: 8px;
    border: 1.4px solid #bbb;
    background: #fff;
    margin-top: -5px;
    font-size: 1.05em;
    color: #143d2d;
    box-sizing: border-box;
}
.toggle-field input[type="checkbox"] { width: auto; margin: 0 7px 0 0; }
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  line-height: 1.3;
  cursor: pointer;
  font-weight: 500;
}
.checkbox-label input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}
.tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0px;
    margin-right:10px;
    margin-left:10px;
    margin-bottom:5px;
}
.tab-content {
    display: none;
    padding: 0 6px 12px 6px;   /* Adjust as needed */
    box-sizing: border-box;
    text-align: left;         /* Right align all content inside */
    max-width: 100%;           /* Prevent overflow */
    overflow-x: auto;          /* Scroll if needed on small screens */
    word-break: break-word;    /* Prevents text overflow */
}
.tab-content.active { display: block; }
.tabs-row {
    display: flex;
    justify-content: space-between;
    margin: 2px 0 2px 0;
    gap: 0px;
}
.btn-tab {
    flex: 1 1 0;
    display: inline-block;
    width: 10%;
    min-width: 100px;
    padding: 0.2em 0;
    margin: 0 5px;
    font-size: 1.18em;
    font-weight: 600;
    color: #16705c;
    background: #f6fff9;
    border: 2px solid #24c68d;
    border-radius: 18px;
    box-shadow: 0 3px 10px #24c68d13, 0 1.5px 6px #1c88662e;
    cursor: pointer;
    transition: 
        background 0.16s, 
        color 0.12s, 
        border-color 0.13s,
        box-shadow 0.16s, 
        transform 0.11s;
    outline: none;
    position: relative;
}
.btn-tab:after {
    content: "";
    display: block;
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: 8px;
    height: 4px;
    background: transparent;
    border-radius: 2px;
    transition: background 0.18s;
}
.btn-tab:not(.active):hover {
    background: #d2faeb;
    color: #0c4537;
    border-color: #179c69;
    transform: scale(1.045) translateY(-1px);
    box-shadow: 0 6px 22px #24c68d2e;
}
.btn-tab.active,
.btn-tab.selected {
    background: #24c68d;
    color: #fff;
    border-color: #16705c;
    font-weight: 700;
    box-shadow: 0 7px 26px #24c68d33;
    transform: scale(1.05) translateY(-2px);
}
.sbf-section { background:#	; border-radius:7px; margin-bottom:0px; padding:10px 11px 0px 11px;}
.sbf-label { font-weight:800; color:#175a3c; margin-bottom:0px; margin-top:-10px; font-size:1.13em; }
.sbf-field { margin-top:0px; margin-bottom:0px;}
.sbf-field select {
    width: 100%;
    padding: 2px 2px;
    border-radius: 8px;
    border: 1.4px solid #bbb;
    background: #fff;
    margin-top: 0px;
    font-size: 1.05em;
    color: #143d2d;
    box-sizing: border-box;
	margin-bottom: 0px;
}
.sbf-field input {
    width: 100%;
    padding: 2px 2px;
    border-radius: 8px;
    border: 1.4px solid #bbb;
    background: #fff;
    margin-top: 0px;
    font-size: 1.05em;
    color: #143d2d;
    box-sizing: border-box;
	margin-bottom: 0px;
}
.sbf-field textarea {
    width: 100%;
    padding: 2px 2px;
    border-radius: 8px;
    border: 1.4px solid #bbb;
    background: #fff;
    margin-top: 0px;
    font-size: 1.05em;
    color: #143d2d;
    box-sizing: border-box;
	margin-bottom: 0px;
}
.sbf-field textarea, .auto-expand {
    min-height: 32px;
    resize: vertical;
}
.sbf-val { margin-bottom:0px; font-size:1.05em; color:#222;}
.sbf-btn { background:#27a844; color:#fff; border:none; border-radius:6px; padding:11px 19px; font-size:1.08em; margin:11px 7px 0 0; font-weight:600; cursor:pointer;}
.sbf-cancel { background:#b0b0b0;}
.group-label        { font-weight:700; margin:14px 0 3px 0; color:#1976d2; }
.group-week-label   { font-size:1.11em; color:#27a844; margin-top:20px;}
.group-day-label    { font-size:1.07em; color:#1769aa; margin-top:10px;}
.group-cat-label    { font-size:1.05em; color:#20c090; margin-top:5px;}
.group-subcat-label { font-size:0.99em; color:#595c67; margin:3px 0 3px 0; }
.group-meals        { margin-bottom:8px; }
.meal-cards-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Always two per row */
    gap: 18px !important;                     /* Consistent spacing */
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}
.meal-card {
        background:#f8f9fa; border-radius:8px; padding:6px 7px; cursor:pointer; position:relative;
        box-shadow:0 1px 6px #0001; border:2px solid #e3f2fd; min-height:36px; align-items:center; flex-direction: column;
        transition:box-shadow 0.16s, border-color 0.16s, background 0.16s;
        font-size:0.97em;
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
}
.meal-card.selected {
    border-color:#28c37c; background:#dcfaee;
    box-shadow:0 2px 12px #20c09033;
}
.meal-title {
    font-size: 1em;
    font-weight: 500;
    color: #1976d2;
    text-align: center;      /* This keeps multi-line text centered */
    display: block;          /* Make sure it's a block-level element */
    margin-left: 0;          /* Optional, you can remove if not needed */
}
.meal-title-wrapper {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;   /* horizontal center, optional */
}
.meal-tick {
    position:absolute; top:7px; right:12px; font-size:1.25em; color:#20c090; pointer-events:none;
}
.meal-subcat {
    width: 100%;
    box-sizing: border-box;
    display: block;
    font-size: 0.99em;
    font-weight: bold;
    background: #f7fcf9;
    color: #1769aa;
    border-radius: 7px 7px 0 0;
    padding: 7px 10px 5px 10px;
    margin: -6px -7px 7px -7px;  /* These match your card's padding for flush edge-to-edge effect */
    text-align: center;
}
.meal-category-header {
    background: #e3f7ef;          /* Light greenish background for category */
    color: #1976d2;               /* Primary blue for the text */
    font-size: 1.15em;            /* Slightly larger than normal text */
    font-weight: 700;             /* Bold */
    border-radius: 7px;           /* Rounded corners */
    padding: 9px 0 7px 12px;      /* Comfortable vertical and left padding */
    margin: 20px 0 10px 0;        /* Space above and below header */
    letter-spacing: 0.03em;       /* A bit more readable */
    box-shadow: 0 1px 6px #0001;  /* Subtle shadow */
    border-left: 4px solid #28c37c; /* Accent left border in green */
    text-align: center; 		   /* Center the text */
    padding-left: 0;     		  /* Remove left padding since we're centering */

}
.dish-note { margin-top:8px; width:95%; padding:5px 7px; border:1px solid #cce; border-radius:5px; background:#f9fafd;}
.dsb-info { background:#f7f8fa; border-radius:8px; margin-bottom:10px; padding:10px 11px; }
.dsb-days { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.dsb-day { background:#fff; border-radius:8px; padding:9px 5px 8px 9px; box-shadow:0 1px 6px #0001; position:relative; border:2px solid #e3f2fd; cursor:pointer; }
.dsb-day.has-delivery {
    border: 2px solid #28c37c !important;
    background: #eafff3 !important;
}
.dsb-addbox:disabled,
.dsb-addbox.dsb-add-disabled {
    opacity: 0.5;
    background: #aaa !important;
    pointer-events: none;
    cursor: not-allowed;
    transition: opacity 0.2s;
}
.dsb-date { font-weight:600; color:#1769aa; font-size:1.08em; }
.dsb-blocked { opacity:0.55; pointer-events:none; background:#f4f4f4;}
.dsb-blockmsg { font-size:0.92em; color:#b44; margin:12px 0;}
.dsb-boxrows { margin-top:4px;}
.dsb-addbox { background:#1769aa; color:#fff; border:none; border-radius:5px; padding:5px 10px; font-size:0.93em; margin:2px 0;}
.dsb-removebox span { cursor:pointer; }
.dsb-removebox { background:none; border:none; padding:0; margin-left:8px; }
.sbf-btn { background:#27a844; color:#fff; border:none; border-radius:6px; padding:8px 14px; font-size:1.06em; font-weight:600; cursor:pointer;}
.dsb-more {background:#1769aa;}
.dsb-addbox:not(:disabled):hover {
    background: #2196f3;
}
.dsb-removebox span:hover {
    background: #ffbaba;
    color: #a33;
}
.dsb-boxrow-header span {
    font-size: 1.04em;
}
.dsb-removebox {
    background: none;
    border: none;
    padding: 0;
    margin-left: 7px;
}
.dsb-removebox span {
    font-size: 2em;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background: #ffe7e6;
    color: #b44;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px #0001;
    cursor: pointer;
}
.dsb-boxrow-fields select {
    min-width: 0px;
    padding: 0;
}
.dsb-boxrow {
    display: block;
    margin-bottom: 4px;
}
.dsb-boxrow-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.dsb-boxrow-fields {
    display: flex;
    gap: 7px;
}
.section-label { color:#1769aa;font-weight:700;margin-bottom:7px;font-size:1.11em;letter-spacing:0.02em;}
.section { background:#e7e8ea; border-radius:7px; margin-bottom:5px; padding:12px 10px 6px 10px; box-shadow:0 1px 8px #b0ffb02b;}
.req { color:#d00;font-size:0.93em;font-weight:600;margin-left:3px;}
.form-row { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:0px; width:100%;}
.form-col { flex:1 1 145px; min-width:0; display:flex; flex-direction:column; }
input[type="checkbox"]{width:auto;margin-right:6px;}
input:focus,select:focus,textarea:focus{border-color:#27a844;background:#f2fbf4;outline:none;}
.optional-hidden{display:none;}
.summary-section{background:#f3fcf7;border:1.2px solid #9edbb7;border-radius:7px;padding:9px 13px 7px 13px;margin-top:11px;}
.summary-row{display:flex;justify-content:space-between;margin-bottom:4px;font-size:1.03em;}
.summary-label{color:#3d3d3d;}
.summary-val{color:#156d3e;font-weight:600;}
.error-msg{color:#b32d2e;background:#fff3f3;border:1px solid #faa;border-radius:4px;padding:5px 13px;margin-bottom:11px;}
#client-popup .table-scroll {
    max-height: 60vh;
    overflow-y: auto;
    display: block;
    min-width: 300px;
}
#client-popup table {
    width: 100%;
    border-collapse: collapse;
}
.input-prefix{background:#f3f3f3;color:#1769aa;font-weight:300;padding:0 2px;font-size:1em;border-right:1px solid #b3b3b3;user-select:none;}
.field-changed { background:#87f25e; border-radius:3px; }
.input-group{display:flex;align-items:center;background:#fafcff;border:1px solid #b3b3b3;border-radius:5px;overflow:hidden;max-width:210px;}
.input-group input[type="text"]{border:none;background:transparent;outline:none;font-size:1em;flex:1 1 auto;padding:7px 8px;}
.input-group input[type="text"]:focus{background:#f2fbf4;}
input,select,textarea{width:100%;max-width:100%;padding:6px 8px;border:1px solid #b3b3b3;border-radius:5px;margin-bottom:0;font-size:1em;background:#fafcff;box-sizing:border-box;min-width:0;}

@media (max-width: 650px) {
	.optional-field {
	flex: 1 1 0;
	min-width: 120px;
}
	.optional-field-full {
    flex: 1 1 100%;
    max-width: 100%;
}
    .container {margin: 60px auto 60px auto; padding: 1.2rem 1.2rem; width: 80vw; max-width: 90vw; min-width: unset;}
    .logo { width: 120px; }
    .btn { font-size: 1em; padding: 0.75em 0; }
    .btn .btn-icon { width: 32px; height: 32px; }
	.btn-tab {
	    flex: 1 1 0;
	    display: inline-block;
	    width: 10%;
	    min-width: 150px;
	    padding: 0.2em 0;
	    margin: 0 5px;
	    font-size: 1.18em;
	    font-weight: 600;
	    color: #16705c;
	    background: #f6fff9;
	    border: 2px solid #24c68d;
	    border-radius: 18px;
	    box-shadow: 0 3px 10px #24c68d13, 0 1.5px 6px #1c88662e;
	    cursor: pointer;
	    transition: 
	        background 0.16s, 
	        color 0.12s, 
	        border-color 0.13s,
	        box-shadow 0.16s, 
	        transform 0.11s;
	    outline: none;
	    position: relative;
	}
    .sbf-section {padding:10px 2vw;}
    .sbf-btn{font-size:0.97em;padding:10px 7vw;}
    .sbf-field input, .sbf-field select, .sbf-field textarea { font-size:0.98em;}
    .sbf-field { flex-direction: column;}
    .dsb-days{grid-template-columns:1fr 1fr;}
    .dsb-day{padding:8px 3vw;}
    .sbf-btn{font-size:0.98em;padding:8px 7vw;}
    .wa-float, .ig-float {
        width: 38px;
        height: 38px;
    }
    .wa-float img, .ig-float img {
        width: 28px;
        height: 28px;
    }
}