/* =============================================================
   WPCafe Single Page Order � Stylesheet
   Layout: same as prototype
   Colors: WPCafe Pro CSS variables (--tt-primary-color etc.)
   Falls back to WPCafe brand pink if variables not set.
   ============================================================= */

/* -- CSS Variable Bridge --------------------------------------- */
:root {
    --spo-primary:      var(--tt-primary-color,       #DEB150);
    --spo-primary-dark: var(--tt-primary-color-dark,  #202127);
    --spo-accent:       var(--tt-secondary-color,     #ffe119);
    --spo-text:         var(--tt-text-color,          #202127);
    --spo-text-muted:   var(--tt-text-color-light,    #666);
    --spo-bg:           var(--tt-section-bg,          #fff);
    --spo-bg-alt:       var(--tt-section-bg-alt,      #f9f9f9);
    --spo-border:       var(--tt-border-color,        #E4E6EB);
    --spo-radius:       12px;
    --spo-radius-sm:    8px;
    --spo-shadow:       0 2px 12px rgba(0,0,0,.08);
    --spo-panel-w:      340px;
    font-family: inherit;
    color: var(--spo-text);
}

/* -- Utility --------------------------------------------------- */
.spo-hidden { display: none !important; }

/* -- Delivery Overlay ------------------------------------------ */
#spo-delivery-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 99999;
    display: flex;
    align-items: flex-start;
    overflow-y: auto;
    justify-content: center;
    animation: spo-overlay-in .2s ease;
}

#spo-delivery-modal {
    background: var(--spo-bg);
    border-radius: var(--spo-radius);
    padding: 36px 32px 28px;
    max-width: 480px;
    width: 90%;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
    animation: spo-modal-in .25s ease;
    margin:auto;
}

#spo-delivery-icon { font-size: 2.4rem; margin-bottom: 10px; }

#spo-delivery-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--spo-text);
    margin: 0 0 6px;
}

#spo-delivery-subtitle {
    color: var(--spo-text-muted);
    font-size: .92rem;
    margin: 0 0 22px;
}

#spo-delivery-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px;
}

.spo-delivery-option {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 2px solid var(--spo-border);
    border-radius: var(--spo-radius-sm);
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color .2s, transform .15s;
    text-align: left;
    position: relative;
}

.spo-delivery-option input[type="radio"] { display: none; }

.spo-delivery-option:hover {
    border-color: var(--spo-primary);
}

.spo-delivery-option.spo-selected {
    border-color: var(--spo-primary);
    background: rgba(227,16,110,0.06);
    background: color-mix(in srgb, var(--spo-primary) 6%, transparent);
    transform: scale(1.02);
}

.spo-do-icon { font-size: 1.6rem; flex-shrink: 0; }

.spo-do-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.spo-do-title { font-weight: 600; font-size: 1.2rem; color: var(--spo-text); }
.spo-do-desc  { font-size: 0.98rem; color: var(--spo-text-muted); margin-top: 2px; font-weight:600; }
.spo-do-cost  { font-size: .88rem; font-weight: 600; color: var(--spo-primary); flex-shrink: 0; }

.spo-do-check {
    position: absolute;
    top: 10px; right: 12px;
    width: 30px; height: 30px;
    background: var(--spo-primary);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem;
    opacity: 0;
    transition: opacity .2s;
}

.spo-delivery-option.spo-selected .spo-do-check { opacity: 1; }

#spo-delivery-confirm {
    background: var(--spo-primary);
    color: #fff;
    border: none;
    border-radius: var(--spo-radius-sm);
    padding: 13px 32px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: background .2s, opacity .2s;
}

#spo-delivery-confirm:disabled {
    opacity: .45;
    cursor: not-allowed;
}

#spo-delivery-confirm:not(:disabled):hover {
    background: var(--spo-primary-dark);
}

/* -- Delivery Badge -------------------------------------------- */
#spo-delivery-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--spo-bg-alt);
    border: 1px solid var(--spo-border);
    border-radius: 99px;
    padding: 7px 14px;
    margin-bottom: 18px;
    font-size: .9rem;
}

#spo-delivery-badge-icon { font-size: 1.6rem; }
#spo-delivery-badge-text { font-size:1.4rem; font-weight: 600; color: var(--spo-text); }

#spo-delivery-change {
    background: none;
    border: none;
    color: var(--spo-primary);
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0 4px;
    text-decoration: underline;
}

/* -- Main Layout ----------------------------------------------- */
#spo-main-layout {
    display: grid;
    grid-template-columns: 1fr var(--spo-panel-w);
    gap: 28px;
    align-items: start;
}

/* -- Menu Column ----------------------------------------------- */
#spo-menu-col { min-width: 0; }

/* -- Controls -------------------------------------------------- */
#spo-controls {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    position: sticky;
    top: 0;
    background: var(--spo-bg);
    z-index: 10;
    padding: 10px 0;
    border-bottom: 1px solid var(--spo-border);
}

#spo-search-wrap {
    display: flex;
    flex: 1;
    border: 1.5px solid var(--spo-border);
    border-radius: var(--spo-radius-sm);
    overflow: hidden;
}

#spo-search {
    flex: 1;
    border: none;
    outline: none;
    padding: 10px 14px;
    font-size: .95rem;
    background: transparent;
    color: var(--spo-text);
}

#spo-search-btn {
    background: var(--spo-primary);
    color: #fff;
    border: none;
    padding: 0 14px;
    cursor: pointer;
    font-size: 1rem;
}

#spo-cat-wrap{
    max-width: 100% !important;
}

#spo-cat-wrap select {
    border: 1.5px solid var(--spo-border);
    border-radius: var(--spo-radius-sm);
    padding: 10px 14px;
    font-size: .95rem;
    background: var(--spo-bg);
    color: var(--spo-text);
    cursor: pointer;
    outline: none;
    width:100% !important;
}

#spo-cat-wrap select:focus {
    border-color: var(--spo-primary);
}

/* -- Category Groups ------------------------------------------- */
.spo-category-group { margin-bottom: 32px; }

.spo-cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--spo-primary);
    margin-bottom: 14px;
}

#spo-sticky-cat-banner .spo-cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gcid-primary-color) !important;
    margin-bottom: 14px;
}

#spo-sticky-cat-banner .spo-cat-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: green;
	text-transform:uppercase;
}

#spo-sticky-cat-banner .spo-cat-count {
    font-size: .78rem;
    font-weight: 600;
    color: var(--gcid-primary-color) !important;
    background: rgba(227,16,110,0.10);
    background: color-mix(in srgb, var(--gcid-primary-color) 10%, transparent) !important;
    padding: 3px 10px;
    border-radius: 99px;
    letter-spacing: .04em;
}

.spo-cat-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: green;
	text-transform:uppercase;
}

.spo-cat-count {
    font-size: .78rem;
    font-weight: 600;
    color: var(--spo-primary);
    background: rgba(227,16,110,0.10);
    background: color-mix(in srgb, var(--spo-primary) 10%, transparent);
    padding: 3px 10px;
    border-radius: 99px;
    letter-spacing: .04em;
}

/* -- Product Row ----------------------------------------------- */
.spo-product-list { display: flex; flex-direction: column; gap: 2px; }

.spo-product-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 12px;
    border-radius: var(--spo-radius-sm);
    transition: background .15s;
}

.spo-product-row:hover { background: var(--spo-bg-alt); }

.spo-product-row.spo-out-of-stock { opacity: .55; }

.spo-row-thumb {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    border-radius: var(--spo-radius-sm);
    overflow: hidden;
    background: var(--spo-bg-alt);
}

.spo-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.spo-row-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.spo-row-name {
    font-weight: 700;
    font-size: 1.1rem;
    color:var(--spo-primary-dark);
    white-space: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
	text-transform:uppercase;
}

.spo-row-desc {
    font-size: 1rem;
    color: var(--spo-text-muted);
    white-space: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
	font-weight:600;
}

.spo-row-price {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--spo-primary);
}

.spo-row-action { flex-shrink: 0; }

.spo-unavailable-text {
    font-size: .8rem;
    color: var(--spo-text-muted);
    background: var(--spo-bg-alt);
    border: 1px solid var(--spo-border);
    border-radius: 99px;
    padding: 4px 12px;
}

/* Fallback qty control (when WPCafe Pro not active) */
.spo-qty-control {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid var(--spo-border);
    border-radius: var(--spo-radius-sm);
    overflow: hidden;
}

.spo-qty-control.has-qty {
    border-color: var(--spo-primary);
}

.spo-qty-minus,
.spo-qty-plus {
    background: none;
    border: none;
    width: 34px;
    height: 34px;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--spo-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}

.spo-qty-plus { background: var(--spo-primary); color: #fff; }
.spo-qty-plus:hover { background: var(--spo-primary-dark); }
.spo-qty-minus:hover { background: var(--spo-bg-alt); }
.spo-qty-val { min-width: 28px; text-align: center; font-weight: 600; font-size: .9rem; }

/* Notice Panel */
.spo-notice-panel{
     position: relative;
     margin-bottom: 10px !important;
     cursor: pointer;
}
.spo-notice-panel-inner{
    background: var(--spo-bg);
    border: 1.5px solid var(--spo-border);
    border-radius: var(--spo-radius);
    padding: 15px;
    box-shadow: var(--spo-shadow);
    line-height: 1 !important;
}
.spo-notice-panel-title{
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--spo-text);
    padding-bottom: 0px !important;
}
.spo-notice-panel-title::before{
    content: "!";
    font-size:30px;
    color:red;
    font-weight: bold;
    display: inline-block;
    animation: zoomwarning 1s infinite ease-in-out;
}
.spo-notice-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 999999;
    display: flex;
    align-items: flex-start;        /* start from top, not center */
    justify-content: center;
    overflow-y: auto;               /* overlay itself scrolls if modal too tall */
    padding: 40px 16px;
    animation: sponoticeoverlayin .2s ease;
}
.spo-notice-modal {
    background: var(--spo-bg);
    border-radius: var(--spo-radius);
    padding: 36px 32px 28px;
    max-width: 800px;
    width: 90%;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
    animation: sponoticemodalin .25s ease;
    position: relative !important;
    margin: auto;                   /* centres vertically when content is short */
}
.spo-popup-notices {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px;
    margin-top: 32px;
    height: 600px;                  /* your fixed height stays */
    overflow-y: scroll;             /* inner scrollbar */
}

.spo-popup-notices::-webkit-scrollbar{
    width:8px;
}
.spo-popup-notices::-webkig-scrollbar-track{
    background:rgba(30,30,30,0.8);
    border-radius:10px;
}
.spo-popup-notices::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background:linear-gradient(135deg,rgba(70,70,70,0.7) 0%,rgba(50,50,50,0.5) 100%);
    box-shadow: inset 0 0 6px rgba(255,255,255,0.1);
}
.spo-popup-notices::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(135deg,rgba(80,80,80,0.8) 0%,rgba(60,60,60,0.6) 100%);
}

.close-btn-ico{
    width: 50px !important;
    display: block !important;
    font-size:20px !important;
    border-radius: 100px !important;
    background-color: var(--spo-primary-dark) !important;
    color:white !important;
    height: 50px !important;
    padding-top: 10px !important;
    cursor: pointer;
}
#spo-notice-modal-close{
    border: none !important;
    background: transparent !important;
    position:absolute;
    top:10px;
    right:10px;
}
@keyframes sponoticemodalin{
    0% {
        opacity: 0;
        transform: scale(.92);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes sponoticeoverlayin{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 100;
    }
}
@keyframes zoomwarning{
    0% {
        transform:scale(1);
    }
    50% {
        transform:scale(1.3)
    }
    100% {
        transform: scale(1);
    }
}


/* -- Right Order Panel ----------------------------------------- */
#spo-order-panel {
    position: relative;
}

#spo-order-panel-inner {
    background: var(--spo-bg);
    border: 1.5px solid var(--spo-border);
    border-radius: var(--spo-radius);
    padding: 20px;
    box-shadow: var(--spo-shadow);
}

#spo-order-panel-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--spo-text);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--spo-border);
}

#spo-panel-empty {
    color: var(--spo-text-muted);
    font-size: .9rem;
    text-align: center;
    padding: 18px 0;
}

.spo-panel-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--spo-border);
    font-size: .9rem;
}

.spo-panel-item-left {
    display: flex;
    gap: 6px;
    align-items: baseline;
    flex: 1;
    min-width: 0;
}

.spo-panel-item-qty {
    font-weight: 700;
    color: var(--spo-primary);
    flex-shrink: 0;
}

.spo-panel-item-name {
    color: var(--spo-text);
    white-space: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spo-panel-item-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.spo-panel-item-price { font-weight: 600; }

.spo-panel-remove {
    background: none;
    border: none;
    color: white;
	background:red;
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color .15s, background .15s;
}

.spo-panel-remove:hover { color: #c0392b; background: #ffeaea; }

.spo-panel-remove::before { content: '\00d7'; }

#spo-panel-totals { margin-top: 10px; }

.spo-total-row {
    display: flex;
    justify-content: space-between;
    font-size: .9rem;
    padding: 5px 0;
    color: var(--spo-text-muted);
}

.spo-grand-total {
    font-weight: 700;
    font-size: 1rem;
    color: var(--spo-text);
    border-top: 1.5px solid var(--spo-border);
    padding-top: 10px;
    margin-top: 4px;
}

#spo-panel-checkout {
    margin-top: 14px;
    width: 100%;
    background: var(--spo-primary);
    color: #fff;
    border: none;
    border-radius: var(--spo-radius-sm);
    padding: 12px;
    font-size: .97rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}

#spo-panel-checkout:hover { background: var(--spo-primary-dark); }

/* -- Sticky Bar ------------------------------------------------ */
#spo-sticky-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9990;
    background: var(--spo-primary);
    color: #fff;
    transform: translateY(100%);
    transition: transform .3s ease;
}

#spo-sticky-bar.spo-visible { transform: translateY(0); }

#spo-sticky-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 20px;
    gap: 16px;
}

#spo-sticky-count { font-size: .9rem; opacity: .9; }
#spo-sticky-center { font-weight: 700; font-size: 1rem; }
#spo-sticky-right { display: flex; align-items: center; gap: 14px; }
#spo-sticky-total { font-weight: 700; font-size: 1rem; }

#spo-sticky-scroll {
    background: #fff;
    color: green;
    border: none;
    border-radius: var(--spo-radius-sm);
    padding: 8px 18px;
    font-weight: 700;
    font-size: 1.3rem;
    cursor: pointer;
    transition: opacity .2s;
}

#spo-sticky-scroll:hover { opacity: .85; }

/* -- Checkout Section ------------------------------------------ */
#spo-checkout-section {
    margin-top: 40px;
    border-top: 2px solid var(--spo-border);
    padding-top: 32px;
}

#spo-checkout-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

.spo-section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--spo-text);
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--spo-primary);
}

/* Cart panel */
#spo-cart-panel {
    position: sticky;
    top: 80px;
    background: var(--spo-bg-alt);
    border-radius: var(--spo-radius);
    padding: 20px;
    border: 1px solid var(--spo-border);
}

#spo-cart-totals { margin-top: 12px; }

.spo-cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--spo-border);
    font-size: .9rem;
}

.spo-cart-item-img {
    width: 48px;
    height: 48px;
    border-radius: var(--spo-radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}

.spo-cart-item-details { flex: 1; min-width: 0; }
.spo-cart-item-name { font-weight: 600; color: var(--spo-text); }
.spo-cart-item-price { font-size: .8rem; color: var(--spo-text-muted); }

.spo-cart-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.spo-cart-item-qty { font-weight: 600; color: var(--spo-text-muted); }
.spo-cart-item-total { font-weight: 700; }

.spo-remove-btn {
    background: red;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color .15s, background .15s;
}

.spo-remove-btn:hover { color: #c0392b; background: #ffeaea; }

/* Form Panel */
#spo-form-panel {
    background: var(--spo-bg);
    border-radius: var(--spo-radius);
    padding: 20px;
    border: 1px solid var(--spo-border);
}

.spo-form-row { margin-bottom: 16px; }

.spo-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.spo-field { margin-bottom: 16px; }
.spo-field:last-child { margin-bottom: 0; }

.spo-field label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--spo-text);
    margin-bottom: 5px;
}

.spo-field label span { color: var(--spo-primary); }

.spo-field input,
.spo-field textarea,
.spo-field select {
    width: 100%;
    border: 1.5px solid var(--spo-border);
    border-radius: var(--spo-radius-sm);
    padding: 10px 13px;
    font-size: .94rem;
    color: var(--spo-text);
    background: var(--spo-bg);
    outline: none;
    transition: border-color .2s;
    box-sizing: border-box;
}

.spo-field input:focus,
.spo-field textarea:focus,
.spo-field select:focus {
    border-color: var(--spo-primary);
}

.spo-field textarea { resize: vertical; }

/* Payment Methods */
#spo-payment-section { margin: 20px 0 16px; }

#spo-payment-section h3 {
    font-size: .97rem;
    font-weight: 700;
    color: var(--spo-text);
    margin: 0 0 10px;
}

.spo-payment-method {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid var(--spo-border);
    border-radius: var(--spo-radius-sm);
    cursor: pointer;
    margin-bottom: 8px;
    transition: border-color .2s;
    font-size: .92rem;
}

.spo-payment-method:has(input:checked) {
    border-color: var(--spo-primary);
    background: rgba(227,16,110,0.05);
    background: color-mix(in srgb, var(--spo-primary) 5%, transparent);
}

.spo-pm-icon img { height: 24px; width: auto; vertical-align: middle; }
.spo-pm-title { font-weight: 600; flex: 1; }
.spo-pm-desc { font-size: .8rem; color: var(--spo-text-muted); }

/* Error */
#spo-form-error {
    background: #ffeaea;
    border: 1px solid #f5c6c6;
    color: #c0392b;
    border-radius: var(--spo-radius-sm);
    padding: 11px 14px;
    font-size: .9rem;
    margin-bottom: 14px;
}

/* Submit Button */
#spo-place-order-btn {
    width: 100%;
    background: var(--spo-primary);
    color: #fff;
    border: none;
    border-radius: var(--spo-radius-sm);
    padding: 14px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, opacity .2s;
    margin-top: 8px;
}

#spo-place-order-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

#spo-place-order-btn:not(:disabled):hover {
    background: var(--spo-primary-dark);
}

/* -- Success Screen --------------------------------------------- */
#spo-success {
    text-align: center;
    padding: 60px 20px;
    animation: spo-fade-in .4s ease;
}

#spo-success-inner { max-width: 480px; margin: 0 auto; }

#spo-success-icon {
    width: 72px;
    height: 72px;
    background: var(--spo-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 20px;
    animation: spo-pop .4s ease;
}

#spo-success h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--spo-text);
    margin: 0 0 10px;
}

#spo-success-msg {
    color: var(--spo-text-muted);
    font-size: .97rem;
    margin: 0 0 24px;
    line-height: 1.6;
}

#spo-order-again {
    background: var(--spo-primary);
    color: #fff;
    border: none;
    border-radius: var(--spo-radius-sm);
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}

#spo-order-again:hover { background: var(--spo-primary-dark); }

/* -- WPCafe Popup Wrapper z-index override --------------------- */
#spo-popup-wrapper { z-index: 999999 !important; }

/* -- Animations ------------------------------------------------ */
@keyframes spo-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes spo-modal-in {
    from { opacity: 0; transform: scale(.92); }
    to   { opacity: 1; transform: scale(1);   }
}

@keyframes spo-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0);     }
}

@keyframes spo-pop {
    0%   { transform: scale(0);    }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1);    }
}

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

/* -- Responsive ------------------------------------------------ */
@media (max-width: 960px) {
    #spo-main-layout {
        grid-template-columns: 1fr;
    }

    #spo-order-panel { display: none; }

    #spo-checkout-inner {
        grid-template-columns: 1fr;
    }

    #spo-cart-panel { position: static; }
}

@media (max-width: 600px) {
    #spo-delivery-modal { padding: 24px 18px 20px; }

    .spo-two-col { grid-template-columns: 1fr; }

    #spo-controls { flex-direction: column; }

    #spo-sticky-center { display: none; }
}


/* -- WPCafe Optiontics / Variation Popup --------------------------------------- */
.wpc-product-popup-content {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.6);
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
}

body.wpc-popup-active {
    overflow: hidden;
}

.wpc-product-popup-content .wpc-popup-wrap {
    position: relative;
    background: #fff;
    border-radius: 8px;
    max-width: 860px;
    margin: 40px auto;
    padding: 30px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    box-sizing: border-box;
}

.wpc-product-popup-content .wpc-popup-wrap-inner {
    position: relative;
}

.wpc-product-popup-content .wpc-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: #333;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.wpc-product-popup-content .wpc-close:hover {
    background: #000;
}

/* Product layout inside popup */
.wpc-product-popup-content .wpc-col-lg-6 {
    width: 48%;
    display: inline-block;
    vertical-align: top;
}

.wpc-product-popup-content .wpc-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* Loading spinner */
.spo-popup-loading {
    text-align: center;
    padding: 40px 20px;
    font-size: 16px;
    color: #666;
}

.spo-popup-loading span::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    border: 3px solid #ddd;
    border-top-color: #333;
    border-radius: 50%;
    animation: spo-spin 0.7s linear infinite;
    vertical-align: middle;
}



/* Responsive popup */
@media (max-width: 640px) {
    .wpc-product-popup-content .wpc-popup-wrap {
        margin: 10px auto;
        padding: 20px 15px;
    }

    .wpc-product-popup-content .wpc-col-lg-6 {
        width: 100%;
        display: block;
    }

    .wpc-product-popup-content .wpc-col-lg-6 {
    width: 100%;
    display: inline-block;
    vertical-align: top;
}

.wpc-col-lg-6 {
        flex: 0 0 100%;
    max-width: 100%;
    }
}

@media (min-width: 992px) {
    .wpc-col-lg-6 {
        flex: 0 0 48%;
    max-width: 100%;
    }
}

.wpc_variation_popup_content .wpc-single-content.summary.entry-summary .optiontics-product-price-summary, .wpc_variation_popup_content .wpc-single-content.summary.entry-summary .optiontics-product-price-summary strong, .wpc_variation_popup_content .wpc-single-content.summary.entry-summary .optiontics-product-price-summary #optiontics_option_price, .wpc_variation_popup_content .wpc-single-content.summary.entry-summary .optiontics-product-price-summary #optiontics_option_total_price {
color: black !important
}

.wpc-popup-wrap-inner{
    padding:20px !important;
}

.wpc_variation_popup_content .addon-form{
padding:0px !important
}

/* -- SPO Toast Notification ---------------------------------------------------- */
#spo-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 999999;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
    white-space: nowrap;
    max-width: 90vw;
}

#spo-toast.spo-toast--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

#spo-toast.spo-toast--success {
    background: #2e7d32;
}

#spo-toast.spo-toast--error {
    background: #c62828;
}

.spo-toast__icon::before {
    font-size: 18px;
    line-height: 1;
}

#spo-toast.spo-toast--success .spo-toast__icon::before {
    content: '✓';
}

#spo-toast.spo-toast--error .spo-toast__icon::before {
    content: '☓';
}

/* Loading state on popup add-to-cart button */
.wpc-product-popup-content .single_add_to_cart_button.loading {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
}

.wpc-product-popup-content .single_add_to_cart_button.loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spo-spin 0.7s linear infinite;
    vertical-align: middle;
}

/* -- Cart Item Addons List ----------------------------------------------------- */
.spo-cart-item-addons {
    list-style: none;
    margin: 4px 0 6px 0;
    padding: 0;
    font-size: 12px;
    color: #555;
    line-height: 1.5;
}

.spo-cart-item-addons li {
    padding: 1px 0;
}

.spo-cart-item-addons li strong {
    color: #333;
}

/* -- Shipping Methods List ----------------------------------------------------- */
.spo-shipping-methods {
    margin: 8px 0 12px;
}

.spo-shipping-method {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 6px;
    border: 2px solid var(--spo-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    font-size: 14px;
}

.spo-shipping-method:hover {
    border-color: var(--spo-primary);
    background: var(--spo-bg-alt);
}

.spo-shipping-method.spo-sm-selected,
.spo-shipping-method:has(input:checked) {
    border-color: var(--spo-primary, #bf9261);
    background: #fdf8f3;
}

.spo-shipping-method input[type="radio"] {
    accent-color: var(--spo-primary, #bf9261);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.spo-sm-label {
    flex: 1;
    font-weight: 500;
    color: var(--spo-text);
}

.spo-sm-cost {
    font-weight: 600;
    color: var(--spo-text);
}

.spo-sm-free {
    font-weight: 600;
    color: #2e7d32;
    background: #e8f5e9;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
}

.spo-no-shipping {
    font-size: 13px;
    color: #c62828;
    padding: 10px;
    background: #fff5f5;
    border-radius: 6px;
    margin: 6px 0;
}

/* -- WC Shipping Notices ------------------------------------------------------- */
#spo-shipping-notices {
    margin-bottom: 10px;
}

.spo-notice {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 6px;
    line-height: 1.4;
}

.spo-notice--error {
    background: #fff5f5;
    border-left: 4px solid #c62828;
    color: #c62828;
}

.spo-notice--notice {
    background: #fff8e1;
    border-left: 4px solid #f57f17;
    color: #5d4037;
}

.spo-notice--success {
    background: #e8f5e9;
    border-left: 4px solid #2e7d32;
    color: #1b5e20;
}

/* -- Fees / Discount rows in checkout totals ---------------------------------- */
.spo-fee-discount {
    color: #2e7d32;
}

.spo-fee-discount span:last-child {
    font-weight: 600;
    color: #2e7d32;
}

.spo-fee-charge {
    color: #c62828;
}

.spo-fee-charge span:last-child {
    font-weight: 600;
    color: #c62828;
}

.spo-fee-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
}

/* Delivery type badge in checkout form */
.spo-delivery-type-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--spo-bg-alt);
    border-radius: var(--spo-radius-sm);
    margin-bottom: 16px;
    font-size: 14px;
}

.spo-delivery-type-badge #spo-delivery-type-label {
    font-weight: 600;
    flex: 1;
    color: var(--spo-text);
}

.spo-delivery-type-badge #spo-change-delivery-type {
    background: none;
    border: 1px solid var(--spo-border);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 13px;
    cursor: pointer;
    color: var(--spo-text-muted);
    transition: border-color 0.2s;
}

.spo-delivery-type-badge #spo-change-delivery-type:hover {
    border-color: var(--spo-primary, #bf9261);
    color: var(--spo-primary, #bf9261);
}
/* -- Zip Code Field (Home Delivery only) -------------------------------------- */
#spo-zip-field {
    margin-bottom: 16px;
}

.spo-zip-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.spo-zip-wrap input[type="text"] {
    flex: 1;
    border: 1.5px solid var(--spo-border);
    border-radius: var(--spo-radius-sm);
    padding: 10px 13px;
    font-size: .94rem;
    color: var(--spo-text);
    background: var(--spo-bg);
    outline: none;
    transition: border-color .2s;
    box-sizing: border-box;
}

.spo-zip-wrap input[type="text"]:focus {
    border-color: var(--spo-primary);
}

.spo-zip-hint {
    font-size: .8rem;
    color: var(--spo-text-muted);
    margin: 5px 0 0;
}

/* Zip price badge */
.spo-zip-price {
    font-size: .88rem;
    font-weight: 600;
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 99px;
    transition: background .2s, color .2s;
    min-width: 60px;
    text-align: center;
}

.spo-zip-price--loading {
    background: #f0f0f0;
    color: var(--spo-text-muted);
    animation: spo-pulse 1.2s ease-in-out infinite;
}

.spo-zip-price--free {
    background: #e8f5e9;
    color: #2e7d32;
}

.spo-zip-price--paid {
    background: rgba(227,16,110,0.10);
    background: color-mix(in srgb, var(--spo-primary) 10%, transparent);
    color: var(--spo-primary);
}

.spo-zip-price--na {
    background: #fff8e1;
    color: #f57f17;
    font-size: .78rem;
}

@keyframes spo-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .45; }
}

/* -- Order Delivery Date & Time Container (ThemeHigh) ------------------------- */
#spo-delivery-date-container {
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1.5px solid var(--spo-border);
    border-radius: var(--spo-radius-sm);
    background: var(--spo-bg-alt);
    transition: border-color .2s;
}

#spo-delivery-date-container:not(.spo-hidden):empty {
    display: none !important;
}

/* Style ThemeHigh fields to match SPO form */
#spo-delivery-date-container .thwdtp-field-wrap,
#spo-delivery-date-container .wdtp-field-wrap {
    margin-bottom: 12px;
}

#spo-delivery-date-container label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--spo-text);
    margin-bottom: 5px;
}

#spo-delivery-date-container input,
#spo-delivery-date-container select {
    width: 100%;
    border: 1.5px solid var(--spo-border);
    border-radius: var(--spo-radius-sm);
    padding: 10px 13px;
    font-size: .94rem;
    color: var(--spo-text);
    background: var(--spo-bg);
    outline: none;
    transition: border-color .2s;
    box-sizing: border-box;
}

#spo-delivery-date-container input:focus,
#spo-delivery-date-container select:focus {
    border-color: var(--spo-primary);
}

#spo-delivery-date-container .flatpickr-input {
    cursor: pointer;
}

/* ThemeHigh section title */
#spo-delivery-date-container h3,
#spo-delivery-date-container .thwdtp-section-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--spo-text);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--spo-border);
}

/*
 * SPO Popup — zip code + time slot field styles
 * Paste this into your spo-style.css, at the end of the delivery popup section.
 * These styles mirror the existing .spo-field / .spo-form-row design language.
 */

/* ── Shared popup field wrapper ─────────────────────────────────────────────── */
#spo-popup-zip-row,
#spo-popup-time-row {
  width: 100%;
  margin-top: 16px;
  margin-bottom: 16px;
}

.spo-popup-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Label — matches .spo-field label style */
.spo-popup-field label,
#spo-popup-time-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;        /* same as your form labels */
  margin-bottom: 4px;
}

.spo-popup-field label span,
#spo-popup-time-label span {
  color: #ef4444;        /* required asterisk — red */
}

/* ── Zip input ───────────────────────────────────────────────────────────────── */
#spo-popup-zip {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  color: #111827;
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

#spo-popup-zip:focus {
  border-color: #f97316;   /* your brand orange — adjust if different */
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}

#spo-popup-zip::placeholder {
  color: #9ca3af;
}

/* Price indicator that appears beside the zip (same as spo-zip-price) */
.spo-popup-zip-wrap {
  position: relative;
  display: block;
  align-items: center;
  gap: 10px;
}

#spo-popup-zip-price {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  min-width: 60px;
}

#spo-popup-zip-price.spo-zip-price--loading { color: #9ca3af; }
#spo-popup-zip-price.spo-zip-price--free    { color: #16a34a; }
#spo-popup-zip-price.spo-zip-price--paid    { color: #f97316; }
#spo-popup-zip-price.spo-zip-price--na      { color: #ef4444; font-size: 11px; }

/* ── Time slot select ────────────────────────────────────────────────────────── */
#spo-popup-time-slot,
#spo-checkout-time-slot {
  width: 100%;
  padding: 10px 36px 10px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  color: #111827;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 10px center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

#spo-popup-time-slot:focus,
#spo-checkout-time-slot:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}

/* Checkout time row wrapper */
#spo-checkout-time-row {
  margin-bottom: 16px;
}

#spo-checkout-time-row .spo-field {
  /* inherits .spo-field spacing automatically */
}

/* ── Divider between options and zip/time in popup ───────────────────────────── */
#spo-popup-zip-row {
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
  margin-bottom: 16px;
}
/*Popup Style*/
.wpc-product-popup-content .price, .wpc-product-popup-content .woocommerce-variation-price, .wpc-menu-of-the-day .price, .wpc-menu-of-the-day .woocommerce-variation-price{
font-size: 20px !important;
color:var(--spo-primary) !important;
margin-bottom: 10px !important;
}
.input-text.qty.text{
padding:10px !important;
}

.wpc_variation_popup_content .wpc-single-content button.single_add_to_cart_button{
background-color: var(--spo-primary) !important;
}

.single_add_to_cart_button.button{
padding:5px 20px !important;
}

.customize_button{
    background: green !important;
    border-radius: 200px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    cursor: pointer !important;
	
	}
.wpcafe-cart_icon{
color:white !important;
font-size: 1rem !important;
}

/* loading */

.spo-loader {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 4px solid var(--spo-primary-dark);
    border-top: 4px solid var(--spo-primary);
    border-right: 4px solid var(--spo-accent);
    animation: spo-spin 0.8s linear infinite;
}

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

.spo-panel-item-note {
	font-size: 11px;
	color: #888;
	font-style: italic;
	margin-top: 3px;
}

.spo-panel-item-note--empty .spo-panel-edit-note {
	color: #aaa;
	background: none;
	border: none;
	font-size: 11px;
	cursor: pointer;
	padding: 0;
	font-style: normal;
}

.spo-panel-edit-note {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 12px;
	padding: 0 2px;
	vertical-align: middle;
}

.spo-cart-item-note {
	font-size: 12px;
	color: #888;
	font-style: italic;
	margin-top: 3px;
}

.wpcafe-cart_icon:before{
    content: "Add To Cart" !important;
	font-size:1.1rem;
	font-weight:600;
}

.spo-popup-description {
    margin-top: 20px;
    padding: 16px;
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: #555;
    max-height: 200px;
    overflow-y: auto;
}

.spo-popup-description p:first-child { margin-top: 0; }
.spo-popup-description p:last-child  { margin-bottom: 0; }