/*
Theme Name: Bali Nana
Theme URI: https://balinana.com
Author: Gaston
Description: Custom single-purpose booking theme for Bali Nana — organic coconuts, bananas, chocolate, weekly flowers, garden plants and concierge services in Sibang Kaja, booked directly through WhatsApp. This is not a general-purpose theme; it renders one fixed page and is not meant to be used on other sites.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bali-nana
*/

/* ===== Design tokens ===== */
:root{
  --cream: #FBF6EC;
  --cream-dark: #F2E9D8;
  --green: #2F5233;
  --green-dark: #203a24;
  --terracotta: #D97D4A;
  --terracotta-dark: #b85f30;
  --ink: #2B2B26;
  --muted: #6b6b5f;
  --white: #ffffff;
  --radius: 14px;
  --shadow: 0 6px 20px rgba(47, 82, 51, 0.10);
  --wa-green: #25D366;
  --wa-green-dark: #1ebe57;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height:1.55;
}
img{max-width:100%;}
h1,h2,h3{
  font-family: Georgia, "Times New Roman", serif;
  color: var(--green-dark);
  margin: 0 0 0.4em 0;
  line-height:1.2;
}
p{margin:0 0 1em 0;}
a{color: var(--terracotta-dark);}
.container{max-width: 920px; margin:0 auto; padding: 0 20px;}
.container.narrow{max-width: 560px;}

/* ===== Header ===== */
header{
  position: sticky; top:0; z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--cream-dark);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 20px;
  max-width: 920px; margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: Georgia, serif; font-weight:bold; font-size: 1.25rem;
  color: var(--green-dark); text-decoration:none;
}
.brand-leaf{font-size:1.4rem;}
@media (max-width:640px){
  .brand{font-size:1.05rem;}
}

/* ===== Screens (tap-to-select flow) ===== */
.screen{display:none;}
.screen.active{display:block;}
.back-link{
  background:none; border:none; color: var(--green-dark); font-weight:700;
  font-size: 0.95rem; padding: 18px 0 6px; cursor:pointer;
}
.screen-intro{color:var(--muted); margin-bottom: 14px;}

/* ===== Tile menu ===== */
.about-card{
  display:flex; gap:16px; align-items:flex-start;
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; margin: 24px 0; text-align:left;
}
.about-avatar{font-size:2.4rem; line-height:1;}
.about-card h3{margin:0 0 6px 0; font-size:1.1rem;}
.about-card p{margin:0 0 10px 0; color:var(--muted); font-size:0.95rem;}
.organic-badge{
  display:inline-block; background:#e9f3e5; color: var(--green-dark);
  border:1px solid #cfe6c6; border-radius:999px; font-size:0.82rem;
  font-weight:700; padding:5px 12px; margin-bottom:14px;
}
.tile-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  margin: 4px 0 30px;
}
@media (min-width:560px){
  .tile-grid{grid-template-columns: repeat(3, 1fr);}
}
.tile{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:6px; background: var(--white); border: 1px solid var(--cream-dark);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 12px; cursor:pointer; font-family: inherit;
  min-height: 128px; justify-content:center;
}
.tile:active{background: var(--cream-dark);}
.tile-icon{font-size:2rem;}
.tile-label{font-weight:700; color: var(--green-dark); font-size:0.98rem;}
.tile-sub{font-size:0.78rem; color:var(--muted);}

.btn-small{
  padding: 9px 14px; font-size:0.85rem;
}

.area-banner{
  display:inline-block; margin-top:16px; background: var(--green);
  color:white; font-weight:700; font-size:0.85rem; line-height:1.5;
  padding: 12px 24px; border-radius: 14px;
  max-width: 380px; text-align:center;
}
.hint.area-note{
  display:block; color: var(--terracotta-dark); font-size:0.82rem; line-height:1.4;
  margin: 16px 0 16px;
}

/* ===== Admin page ===== */
.admin-tabs{
  display:flex; gap:8px; margin: 20px 0 18px;
}
.admin-tab{
  flex:1; background: var(--white); border:1px solid var(--cream-dark);
  border-radius: 10px; padding: 12px 10px; font-weight:700; font-size:0.9rem;
  cursor:pointer; color: var(--muted);
}
.admin-tab.active{
  background: var(--green); color:white; border-color: var(--green);
}
.admin-request-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.admin-request-details{
  font-size:0.9rem; color: var(--ink); margin-bottom:14px; line-height:1.6;
}
.status-badge{
  font-size:0.78rem; font-weight:700; padding:4px 10px; border-radius:999px;
  white-space:nowrap;
}
.status-pending{ background:#fdf0dc; color:#8a5a12; }
.status-done{ background:#e3f3e1; color:#1e6b2f; }
.admin-product-label{ font-weight:700; margin-bottom:10px; font-size:1.02rem; }
.admin-save-status{ margin-left:10px; }

/* ===== Hero ===== */
.hero{
  padding: 56px 20px 44px;
  text-align:center;
  background: linear-gradient(180deg, var(--cream-dark), var(--cream));
}
.hero h1{font-size: 2.1rem; margin-bottom: 0.3em;}
.hero p.lead{font-size:1.1rem; color: var(--muted); max-width:560px; margin:0 auto 1.4em;}
.hero-note{
  display:inline-block; background: var(--white); border: 1px solid var(--cream-dark);
  border-radius: 999px; padding: 8px 18px; font-size: 0.9rem; color: var(--green-dark);
  box-shadow: var(--shadow);
}

/* ===== Sections ===== */
section.services{padding: 48px 0; border-top: 1px solid var(--cream-dark);}
section.services:nth-of-type(even){background: var(--cream-dark);}
.section-head{text-align:center; max-width:600px; margin: 0 auto 32px;}
.section-head h2{font-size:1.6rem;}
.section-head p{color:var(--muted);}

/* ===== Cards / forms ===== */
.card{
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 24px;
  margin-bottom: 20px;
}
.item-row{
  display:flex; align-items:center; justify-content:space-between;
  gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--cream-dark);
}
.item-row:last-of-type{border-bottom:none;}
.item-info strong{display:block; font-size:1.02rem;}
.item-info span{color:var(--muted); font-size:0.9rem;}
.qty{
  display:flex; align-items:center; gap:8px;
}
.qty button{
  width:32px; height:32px; border-radius:8px; border:1px solid var(--cream-dark);
  background: var(--cream); font-size:1.1rem; cursor:pointer; color: var(--green-dark);
}
.qty input{
  width:46px; text-align:center; border:1px solid var(--cream-dark); border-radius:8px;
  padding:6px 4px; font-size:1rem;
}

.field{margin-bottom:16px;}
.field label{display:block; font-weight:600; margin-bottom:6px; font-size:0.92rem;}
.field input[type=text], .field input[type=tel], .field input[type=date], .field textarea, .field select{
  width:100%; padding:11px 12px; border:1px solid #d9d0bb; border-radius:10px;
  font-size:1rem; font-family:inherit; background: var(--cream);
}
.field textarea{min-height:72px; resize:vertical;}
.field-row{display:flex; gap:14px; flex-wrap:wrap;}
.field-row .field{flex:1; min-width:180px;}

.radio-group{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
.radio-group label{
  display:flex; align-items:center; gap:8px;
  background: var(--cream); border:1px solid #d9d0bb; border-radius: 999px;
  padding: 9px 16px; font-size:0.92rem; cursor:pointer;
}
.radio-group input{accent-color: var(--green);}

.hint{font-size:0.85rem; color:var(--muted); margin-top:-8px; margin-bottom:16px;}
.note-box{
  background: #fbeee3; border-left:4px solid var(--terracotta);
  padding: 12px 16px; border-radius: 8px; font-size:0.92rem; color: var(--ink);
  margin-bottom:20px;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--wa-green); color:white; border:none;
  padding: 13px 22px; border-radius: 999px; font-size:1rem; font-weight:700;
  cursor:pointer; text-decoration:none; justify-content:center;
}
.btn:hover{background: var(--wa-green-dark);}
.btn-block{width:100%;}
.btn-secondary{
  background: var(--green);
}
.btn-secondary:hover{background: var(--green-dark);}
.btn-outline{
  display:inline-block; margin-top:14px; background: transparent;
  color: var(--green-dark); border: 2px solid var(--green);
  padding: 11px 20px;
}
.btn-outline:hover{background: var(--green); color:white;}

.confirm-msg{
  display:none; margin-top:14px; padding: 12px 14px; border-radius:10px;
  background:#e8f5e9; color:#1b5e20; font-size:0.9rem;
}
.confirm-msg.show{display:block;}

/* ===== Footer ===== */
footer{
  padding: 34px 20px 40px; text-align:center; color: var(--muted); font-size:0.88rem;
  border-top: 1px solid var(--cream-dark);
}
footer a{color:var(--green-dark); font-weight:600;}