/* Goa Home Cooks - shared stylesheet
   Design system: Warm Earth & Coastal Hearth (white-background variant per client request) */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;600;700&display=swap');

:root{
  --surface:#ffffff;
  --surface-container-lowest:#ffffff;
  --surface-container-low:#fbf9f7;
  --surface-container:#f5efec;
  --surface-container-high:#efe5e0;
  --surface-container-highest:#e9dcd6;
  --on-surface:#211a17;
  --on-surface-variant:#57423e;
  --outline:#8a716d;
  --outline-variant:#e6dec9;

  --primary:#b84a39;
  --primary-hover:#9f3d2e;
  --on-primary:#ffffff;
  --primary-container:#ffedea;
  --on-primary-container:#842417;

  --secondary:#5a6b47;
  --on-secondary:#ffffff;
  --secondary-container:#e4edd6;

  --tertiary:#d9822b;
  --on-tertiary:#ffffff;
  --tertiary-container:rgba(217,130,43,0.12);

  --error:#ba1a1a;
  --on-error:#ffffff;
  --error-container:#ffdad6;

  --radius-sm:0.5rem;
  --radius-md:0.75rem;
  --radius-lg:1rem;
  --radius-xl:1.5rem;
  --radius-full:9999px;

  --space-xs:0.25rem;
  --space-sm:0.5rem;
  --space-md:1rem;
  --space-lg:1.5rem;
  --space-xl:2.5rem;
  --space-2xl:4rem;

  --shadow-rest:0 4px 20px -2px rgba(43,36,33,0.06);
  --shadow-hover:0 12px 32px -4px rgba(184,74,57,0.10), 0 2px 6px 0 rgba(43,36,33,0.05);
  --shadow-modal:0 20px 48px -8px rgba(43,36,33,0.18);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--surface);
  color:var(--on-surface);
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:15px;
  line-height:1.6;
}
h1,h2,h3,h4,.font-display{
  font-family:'Playfair Display', serif;
  font-weight:600;
  color:var(--on-surface);
  margin:0 0 var(--space-sm) 0;
}
h1{font-size:2.5rem; line-height:1.15; letter-spacing:-0.02em;}
h2{font-size:2rem; line-height:1.2;}
h3{font-size:1.5rem; line-height:1.3;}
p{margin:0 0 var(--space-md) 0; color:var(--on-surface-variant);}
a{color:var(--primary); text-decoration:none;}
a:hover{text-decoration:underline;}

.container{max-width:1280px; margin:0 auto; padding:0 var(--space-lg);}
@media(min-width:1024px){.container{padding:0 var(--space-2xl);}}

/* ---------- Header ---------- */
.sitehmargin{background:var(--surface); border-bottom:1px solid var(--outline-variant);}
.sitehmarginheader{display:flex; align-items:center; justify-content:space-between; padding:var(--space-md) 0;}
.sitelogo{display:flex; align-items:center; gap:var(--space-sm); font-family:'Playfair Display',serif; font-weight:700; font-size:1.25rem; color:var(--on-surface);}
.sitelogo img{height:36px; width:36px; border-radius:var(--radius-full);}
.sitelogo small{display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:0.65rem; letter-spacing:0.08em; color:var(--outline); text-transform:uppercase;}

.navlinks{display:flex; align-items:center; gap:var(--space-lg); list-style:none; margin:0; padding:0;}
.navlinks a{color:var(--on-surface); font-weight:600; font-size:0.9rem;}
.navlinks a.active{color:var(--primary);}
.navlinks a:hover{text-decoration:none; color:var(--primary);}

.headerright{display:flex; align-items:center; gap:var(--space-md);}
.guestpill{display:flex; align-items:center; gap:6px; background:var(--surface-container); border:1px solid var(--outline-variant); border-radius:var(--radius-full); padding:6px 14px; font-weight:600; font-size:0.85rem;}
.cartbtn{position:relative; display:flex; align-items:center; gap:6px; background:var(--surface-container); border:1px solid var(--outline-variant); border-radius:var(--radius-full); padding:8px 14px; font-weight:600; color:var(--on-surface);}
.cartbadge{background:var(--primary); color:var(--on-primary); border-radius:var(--radius-full); font-size:0.7rem; padding:1px 7px;}
.avatarcircle{width:38px; height:38px; border-radius:50%; background:var(--primary); color:var(--on-primary); display:flex; align-items:center; justify-content:center; font-weight:700;}

.hamburgerbtn{display:none; background:none; border:none; font-size:1.5rem; color:var(--on-surface); cursor:pointer;}

@media(max-width:900px){
  .navlinks{display:none; position:absolute; top:64px; left:0; right:0; background:var(--surface); flex-direction:column; align-items:flex-start; padding:var(--space-md) var(--space-lg); border-bottom:1px solid var(--outline-variant); box-shadow:var(--shadow-modal); z-index:50;}
  .navlinks.open{display:flex;}
  .hamburgerbtn{display:block;}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--radius-sm); font-weight:700; font-size:0.9rem; padding:12px 22px; border:1px solid transparent; cursor:pointer; transition:all .15s ease;}
.btn:hover{text-decoration:none;}
.btn:disabled{opacity:0.6; cursor:not-allowed;}
.btnprimary{background:var(--primary); color:var(--on-primary);}
.btnprimary:hover{background:var(--primary-hover); color:var(--on-primary);}
.btnsecondary{background:var(--surface-container); color:var(--on-surface); border-color:var(--outline-variant);}
.btnsecondary:hover{background:var(--surface-container-high);}
.btnghost{background:transparent; color:var(--primary); border:none; text-decoration:underline; text-underline-offset:4px;}
.btnsm{padding:8px 14px; font-size:0.8rem;}
.btnblock{width:100%;}
.btndanger{background:var(--error); color:var(--on-error);}

/* ---------- Cards ---------- */
.card{background:var(--surface); border:1px solid var(--outline-variant); border-radius:var(--radius-lg); box-shadow:var(--shadow-rest); overflow:hidden;}
.card:hover{box-shadow:var(--shadow-hover);}
.cardbody{padding:var(--space-lg);}

.badge{display:inline-flex; align-items:center; gap:4px; font-size:0.7rem; font-weight:700; padding:3px 10px; border-radius:var(--radius-full); letter-spacing:0.03em;}
.badgeveg{background:var(--secondary-container); color:var(--secondary); border:1px solid var(--secondary);}
.badgenonveg{background:var(--primary-container); color:var(--primary); border:1px solid var(--primary);}
.badgetag{background:var(--tertiary-container); color:var(--tertiary); border:1px solid rgba(217,130,43,0.3);}

/* ---------- Forms ---------- */
label{display:block; font-weight:600; font-size:0.85rem; margin-bottom:6px; color:var(--on-surface);}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=date],input[type=time],select,textarea{
  width:100%; padding:11px 14px; border:1px solid var(--outline-variant); border-radius:var(--radius-sm);
  background:var(--surface); font-family:inherit; font-size:15px; color:var(--on-surface);
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(184,74,57,0.15);}
.formgroup{margin-bottom:var(--space-md);}
.formrow{display:flex; gap:var(--space-md); flex-wrap:wrap;}
.formrow > *{flex:1; min-width:200px;}

.stepper{display:inline-flex; align-items:center; gap:10px; background:var(--surface-container); border-radius:var(--radius-full); padding:4px;}
.stepper button{width:32px; height:32px; border-radius:50%; border:none; background:var(--surface); color:var(--primary); font-weight:700; font-size:1.1rem; cursor:pointer;}
.stepper span{min-width:24px; text-align:center; font-weight:700;}

/* ---------- Toast ---------- */
#toastcontainer{position:fixed; top:40%; left:50%; transform:translate(-50%,-50%); z-index:9999;}
.toastmsg{background:var(--on-surface); color:#fff; padding:14px 26px; border-radius:var(--radius-md); box-shadow:var(--shadow-modal); font-weight:600; margin-bottom:10px; opacity:0; transition:opacity .25s ease;}
.toastmsg.show{opacity:1;}
.toastsuccess{background:var(--secondary);}
.toasterror{background:var(--error);}

/* ---------- Footer ---------- */
.sitefooter{background:var(--surface-container-low); border-top:1px solid var(--outline-variant); padding:var(--space-2xl) 0 var(--space-lg);}
.footergrid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--space-xl);}
.footergrid h4{font-family:'Plus Jakarta Sans',sans-serif; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--on-surface);}
.footergrid ul{list-style:none; padding:0; margin:0;}
.footergrid li{margin-bottom:8px;}
.footerbottom{border-top:1px solid var(--outline-variant); margin-top:var(--space-xl); padding-top:var(--space-md); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:0.8rem; color:var(--outline);}
@media(max-width:768px){.footergrid{grid-template-columns:1fr;}}

/* ---------- Tables (admin) ---------- */
table.datatable{width:100%; border-collapse:collapse; background:var(--surface);}
table.datatable th, table.datatable td{padding:10px 12px; border-bottom:1px solid var(--outline-variant); text-align:left; font-size:0.85rem;}
table.datatable th{background:var(--surface-container-low); font-weight:700;}
table.datatable input.columnfilter{width:100%; padding:5px 8px; font-size:0.75rem;}

/* ---------- Utility ---------- */
.textmuted{color:var(--outline);}
.textprimary{color:var(--primary);}
.mt-sm{margin-top:var(--space-sm);}
.mt-md{margin-top:var(--space-md);}
.mt-lg{margin-top:var(--space-lg);}
.mb-sm{margin-bottom:var(--space-sm);}
.mb-md{margin-bottom:var(--space-md);}
.mb-lg{margin-bottom:var(--space-lg);}
.flex{display:flex;}
.flexbetween{display:flex; align-items:center; justify-content:space-between;}
.flexgap{display:flex; gap:var(--space-md); flex-wrap:wrap;}
.hidden{display:none !important;}
.grid{display:grid; gap:var(--space-lg);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr);} .grid-2{grid-template-columns:1fr;}}
@media(max-width:600px){.grid-3{grid-template-columns:1fr;}}

.sectionpad{padding:var(--space-2xl) 0;}
.pill{border-radius:var(--radius-full); padding:6px 14px; font-size:0.75rem; font-weight:700; border:1px solid var(--outline-variant); background:var(--surface-container-low);}
.itemimg{height:170px; background:var(--surface-container) center/cover no-repeat; border-radius:var(--radius-md) var(--radius-md) 0 0;}

/* ---------- Admin shell ---------- */
.adminwrap{display:flex; min-height:100vh;}
.adminsidebar{width:240px; background:var(--on-surface); color:#fff; flex-shrink:0; padding:var(--space-md) 0;}
.adminsidebar .sitelogo{color:#fff; padding:0 var(--space-md) var(--space-md); border-bottom:1px solid rgba(255,255,255,0.1); margin-bottom:var(--space-md);}
.adminsidebar .sitelogo small{color:rgba(255,255,255,0.6);}
.adminnav a{display:block; padding:10px 20px; color:rgba(255,255,255,0.75); font-weight:600; font-size:0.9rem;}
.adminnav a:hover{background:rgba(255,255,255,0.06); text-decoration:none; color:#fff;}
.adminnav a.active{background:var(--primary); color:#fff;}
.adminmain{flex:1; min-width:0; background:var(--surface-container-low);}
.admintopbar{background:var(--surface); border-bottom:1px solid var(--outline-variant); padding:14px var(--space-lg); display:flex; justify-content:space-between; align-items:center;}
.admincontent{padding:var(--space-lg);}
.adminhamburger{display:none; background:none; border:none; font-size:1.4rem; cursor:pointer;}
@media(max-width:900px){
  .adminsidebar{position:fixed; left:-260px; top:0; bottom:0; z-index:100; transition:left .2s ease;}
  .adminsidebar.open{left:0;}
  .adminhamburger{display:block;}
}
.statcard{background:var(--surface); border:1px solid var(--outline-variant); border-radius:var(--radius-lg); padding:var(--space-md);}
.statcard .statvalue{font-family:'Playfair Display',serif; font-size:2rem; font-weight:700; color:var(--primary);}
.filterrow input, .filterrow select{padding:5px 8px; font-size:0.75rem;}