/* Modern lightweight UI theme for iBuy
   - System fonts for performance
   - Refreshed color palette and variables
   - Subtle shadows, rounded corners, improved spacing
   - Keeps existing utility and semantic class names
*/

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#eef1f8;
  --surface:#ffffff;
  --muted:#6b7280;
  --text:#0f172a;
  --primary:#2563eb; /* blue-600 */
  --primary-600:#1e40af;
  --accent:#06b6d4; /* cyan */
  --success:#16a34a;
  --danger:#ef4444;
  --warning:#f59e0b;
  --glass: rgba(255,255,255,0.6);
  --border: #e6edf3;
  --shadow-sm: 0 4px 14px rgba(2,6,23,0.06);
  --shadow-md: 0 10px 30px rgba(2,6,23,0.08);
  --radius: 10px;
  --fw-regular: 400;
  --fw-medium: 600;
}

html,body{height:100%;overflow-x:hidden}
body{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  font-size:15px;
  padding-bottom:15px;
  height:max-content;
}

/* Hidden helper used across pages */
.hidden{display:none!important}

/* NAVBAR */
.navbar{
  background:linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,1));
  backdrop-filter: blur(6px);
  padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;position:sticky;top:0;z-index:1200;border-bottom:1px solid var(--border);
  flex-wrap:wrap;
  min-height:60px;
}
.navbar-brand{font-size:1.25rem;font-weight:700;color:var(--primary);text-decoration:none}
.navbar-menu{display:flex;gap:14px;align-items:center;list-style:none}
.navbar-menu a{color:var(--muted);text-decoration:none;padding:8px;border-radius:8px;transition:all .18s}
.navbar-menu a.active, .navbar-menu a:hover{color:var(--primary);background:rgba(37,99,235,0.06)}
.navbar-actions{display:flex;gap:10px;align-items:center}

/* Hamburger menu button (hidden on desktop) */
.navbar-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding-top: 17px;
  flex-direction:column;
  gap:4px;
  width:auto;
  height:auto;
  justify-content:center;
  align-items:flex-start;
  border-radius:6px;
  transition:background .2s;
  position:absolute;
  left:20px;
  top:50px;
}
.navbar-toggle:hover{background:rgba(37,99,235,0.06)}
.navbar-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:var(--primary);
  border-radius:2px;
  transition:all .3s ease;
}
.navbar-toggle.active span:nth-child(1){transform:rotate(45deg) translateY(7px)}
.navbar-toggle.active span:nth-child(2){opacity:0}
.navbar-toggle.active span:nth-child(3){transform:rotate(-45deg) translateY(-7px)}

/* Container */
.container{max-width:1180px;margin:28px auto;padding:0 18px}

/* CARD */
.card{background:var(--surface);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm);margin-bottom:18px;border:1px solid var(--border);}
.card-header{font-size:1.15rem;font-weight:var(--fw-medium);margin-bottom:10px;color:var(--text)}
.card-body{padding-top:6px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:8px;padding:8px 14px;font-weight:600;border:0;cursor:pointer;text-decoration:none}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 6px 18px rgba(37,99,235,0.14)}
.btn-primary:hover{background:var(--primary-600)}
.btn-secondary{background:transparent;color:var(--primary);border:1px solid rgba(37,99,235,0.08)}
.btn-outline{background:transparent;border:1.5px solid var(--primary);color:var(--primary);transition:all .18s}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.btn-small{padding:6px 10px;font-size:0.875rem}
.btn:disabled{opacity:0.6;cursor:not-allowed}

/* Forms */
.form-group{margin-bottom:14px}
.form-label{display:block;margin-bottom:6px;font-weight:600;color:var(--muted);font-size:0.95rem}
.form-control{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:linear-gradient(180deg, #fff, #fbfdff);transition:all .15s;font-size:0.95rem}
.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 6px 18px rgba(37,99,235,0.06)}
textarea.form-control{min-height:120px;resize:vertical}
select.form-control{appearance:none}
.form-error{color:var(--danger);font-size:0.9rem;margin-top:6px}

/* Grid helpers */
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid-3{grid-template-columns:1fr}}

/* Table */
.table{width:100%;border-collapse:collapse;border-radius:8px;overflow:hidden}
.table thead th{background:linear-gradient(90deg,var(--primary),var(--accent));color:#fff;padding:12px;text-align:left}
.table td, .table th{padding:12px;border-bottom:1px solid var(--border);background:var(--surface)}
.table tbody tr:hover{background:#f3f6fb}

/* Modal */
.modal{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;background:rgba(2,6,23,0.5);z-index:2200;padding:24px;opacity:0;pointer-events:none;transition:opacity .18s;overflow-y:auto}
.modal.active{opacity:1;pointer-events:auto}
.modal-content{width:100%;max-width:520px;max-height:calc(100vh - 48px);overflow-y:auto;border-radius:12px;padding:18px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:var(--shadow-md);border:1px solid var(--border);scrollbar-width:thin;scrollbar-color:rgba(37,99,235,0.3) transparent}
.modal-content::-webkit-scrollbar{width:8px}
.modal-content::-webkit-scrollbar-track{background:transparent}
.modal-content::-webkit-scrollbar-thumb{background:rgba(37,99,235,0.3);border-radius:4px}
.modal-content::-webkit-scrollbar-thumb:hover{background:rgba(37,99,235,0.5)}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;position:sticky;top:0;background:linear-gradient(180deg,#fff,#fbfdff);z-index:10;padding-bottom:8px;border-bottom:1px solid var(--border)}
.modal-title{font-size:1.125rem;font-weight:700}
.modal-close{background:none;border:0;font-size:20px;cursor:pointer;color:var(--muted)}

/* Floating Toast Notifications */
#alert-container{position:fixed;top:20px;right:20px;z-index:9999;max-width:400px;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,0.12);pointer-events:auto;opacity:0;transform:translateX(100%);transition:none;font-size:0.95rem;word-break:break-word}
.toast-visible{animation:toastSlideIn 0.35s ease forwards}
.toast-exit{animation:toastSlideOut 0.3s ease forwards}
.toast-message{flex:1}
.toast-close{background:none;border:none;font-size:1.25rem;cursor:pointer;color:inherit;opacity:0.7;padding:0 2px;line-height:1;flex-shrink:0}
.toast-close:hover{opacity:1}
.toast-success{background:#ecfdf5;color:var(--success);border:1px solid rgba(22,163,74,0.2)}
.toast-error{background:#fef2f2;color:var(--danger);border:1px solid rgba(239,68,68,0.2)}
.toast-warning{background:#fffbeb;color:var(--warning);border:1px solid rgba(245,158,11,0.2)}
.toast-info{background:#ecfeff;color:var(--accent);border:1px solid rgba(6,182,212,0.2)}
@keyframes toastSlideIn{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}
@keyframes toastSlideOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}

/* Badge */
.badge{display:inline-block;padding:6px 10px;border-radius:999px;font-weight:700;font-size:0.85rem}
.badge-success{background:rgba(22,163,74,0.12);color:var(--success)}
.badge-warning{background:rgba(245,158,11,0.12);color:var(--warning)}
.badge-danger{background:rgba(239,68,68,0.12);color:var(--danger)}
.badge-info{background:rgba(6,182,212,0.12);color:var(--accent)}

/* Spinner */
.spinner{width:36px;height:36px;border-radius:50%;border:4px solid var(--border);border-top-color:var(--primary);animation:spin 1s linear infinite;margin:18px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* Utilities */
.text-center{text-align:center}.text-right{text-align:right}
.mt-1{margin-top:8px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}.mt-4{margin-top:24px}
.flex-between{display:flex;justify-content:space-between;align-items:center}

/* small responsive tweaks */
@media(max-width:768px){
  .navbar{
    padding:10px 16px 16px;
    min-height:100px;
    position:relative;
    align-content:flex-start;
  }
  
  .navbar-toggle{
    display:flex;
    position:absolute;
    left:16px;
    top:50px;
    z-index:10;
  }
  
  .navbar-brand{
    margin-left:0;
  }
  
  .navbar-menu{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    width:100%;
    order:4;
    gap:8px;
    max-height:0;
    overflow:hidden;
    opacity:0;
    margin-top:0;
    padding-top:0;
    border-top:1px solid transparent;
    transition:max-height 0.35s ease, opacity 0.3s ease, padding-top 0.35s ease,
               border-color 0.3s ease, margin-top 0.35s ease;
  }
  
  .navbar-menu.active{
    max-height:500px;
    opacity:1;
    padding-top:10px;
    margin-top:45px;
    border-top-color:var(--border);
  }
  
  .navbar-menu a{
    width:100%;
    padding:5px 12px;
    text-align:left;
  }
  
  .badge{
    font-size:0.75rem;
  }
  
  .navbar-actions{
    flex-wrap:wrap;
    margin-left:auto;
  }
  
  .container{padding:0 14px}
  .btn{padding:8px 10px}
}

/* keep compatibility with previous classes used in JS */
.hidden{display:none!important}

/* Notification red dot indicator — add this class to any element to show a dot */
.notification-dot {
  position: relative;
}
.notification-dot::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -8px;
  width: 10px;
  height: 10px;
  background: #e74c3c;
  border-radius: 50%;
  border: 2px solid #fff;
  pointer-events: none;
}

/* Password toggle visibility */
.password-wrapper{position:relative;display:flex;align-items:center}
.password-wrapper .form-control{padding-right:36px}
.password-toggle-btn{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;
  padding:0;display:flex;align-items:center;justify-content:center;
  color:#888;line-height:0;
}
.password-toggle-btn:focus{outline:none}
.password-toggle-btn img{width:20px;height:20px;opacity:0.3}
.password-toggle-btn .eye-off{display:none}
.password-toggle-btn.active .eye-on{display:none}
.password-toggle-btn.active .eye-off{display:inline}

/* End of theme */

/* Muted helper text */
.text-muted{display:block;margin-top:4px;color:#6b7280;font-size:0.85rem}

/* Fulfillment Toggle (shared by products & cart pages) */
.fulfillment-toggle {
    display: flex;
    border: 1.5px solid var(--border-color, var(--border));
    border-radius: 8px;
    overflow: hidden;
}

.fulfillment-toggle-option {
    flex: 1;
    padding: 0.5rem 1rem;
    border: none;
    background: #f8fafc;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--muted);
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    text-align: center;
}

.fulfillment-toggle-option + .fulfillment-toggle-option {
    border-left: 1.5px solid var(--border-color, var(--border));
}

.fulfillment-toggle-option.active {
    background: var(--primary-color, var(--primary));
    color: #fff;
}

/* Disabled state for unavailable fulfillment option */
.fulfillment-toggle-option.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: auto;   /* keep clickable so we can show help text */
}

/* Help text shown below toggle when disabled option is clicked */
.fulfillment-help-text {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--danger, #ef4444);
    animation: helpTextFadeIn 0.2s ease;
}

.fulfillment-help-text--fade-out {
    animation: helpTextFadeOut 0.3s ease forwards;
}

@keyframes helpTextFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes helpTextFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Delivery-unavailable info modal */
.fulfillment-unavailable-modal-content {
    max-width: 400px;
    padding: 1.5rem;
    text-align: center;
    position: relative;
}

.fulfillment-unavailable-modal-content > .modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
}

.fulfillment-unavailable-modal-body {
    margin: 1rem 0 1.25rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text, #0f172a);
}

.fulfillment-unavailable-modal-footer {
    display: flex;
    justify-content: center;
}

/* Fulfillment Selection Modal (delivery / pickup chooser) */
.fulfillment-modal-content {
    max-width: 380px;
    padding: 1.5rem;
    border-radius: 14px;
    text-align: center;
}

.fulfillment-modal-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
    color: var(--text-color, #1e293b);
}

.fulfillment-modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fulfillment-modal-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem;
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, background 0.15s, box-shadow 0.2s;
}

.fulfillment-modal-btn:hover {
    border-color: var(--primary-color, #2563eb);
    background: rgba(37, 99, 235, 0.04);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.fulfillment-modal-btn-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color, #1e293b);
}

.fulfillment-modal-btn-desc {
    font-size: 0.8rem;
    color: var(--muted, #64748b);
}

@media (max-width: 768px) {
    .fulfillment-toggle {
        width: 100%;
    }
}

/* ================================================================== */
/*  Shared Cart Badge Controls                                        */
/*  Used by product cards (dashboard) and cart item rows (cart page)   */
/* ================================================================== */

.cart-badge-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    background: #fff;
    border: 2px solid var(--primary, #2563eb);
    border-radius: 8px;
    padding: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

.cart-badge-btn {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--primary, #2563eb);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.15s;
}

.cart-badge-btn:hover {
    background: rgba(37, 99, 235, 0.08);
}

.cart-badge-value {
    color: var(--primary, #2563eb);
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
    user-select: none;
}