/* ===== Coconut Menu — style.css ===== */
:root{--green:#1f4d37;--green2:#2f6b4f;--gold:#e0a458;--gold2:#f3d9b1;--cream:#fbf7ef;--brown:#7a2e1f;--txt:#2a2a2a;--mut:#7a857d;--r:24px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-padding-top:120px}
html,body{max-width:100%}
body{overflow-x:clip}
body{margin:0;font-family:Cairo,Tahoma,sans-serif;background:var(--cream);color:var(--txt);line-height:1.5}

/* Hero */
.hero{position:relative;overflow:hidden;text-align:center;color:#fff;padding:calc(env(safe-area-inset-top,0px) + 44px) 16px 70px;
 background:radial-gradient(circle at 15% 25%,#4b9a73 0,transparent 40%),radial-gradient(circle at 85% 70%,#2b6a4c 0,transparent 45%),linear-gradient(160deg,#1f4d37,#143626)}
.hero:before,.hero:after{content:"";position:absolute}
.hero:before{width:260px;height:260px;border-radius:50%;border:2px solid #ffffff18;top:-90px;right:-70px}
.hero:after{left:0;right:0;bottom:-1px;height:34px;background:var(--cream);border-radius:60% 60% 0 0/100% 100% 0 0}
.hero h1{margin:0;font-size:clamp(3.4rem,14vw,7rem);font-weight:800;letter-spacing:8px;line-height:1.05;text-shadow:0 4px 0 #0003;animation:pop .7s both}
.hero h1 span{color:var(--gold)}
.hero p{margin:10px 0 14px;font-size:1.4rem;color:var(--gold2);font-weight:700}
.hero .sub{display:inline-block;padding:6px 20px;border:1px solid #ffffff55;border-radius:30px;font-size:.95rem;background:#ffffff14}
@keyframes pop{from{opacity:0;transform:scale(.9) translateY(10px)}}

/* Header */
header{position:sticky;top:0;z-index:10;background:#1f4d37;color:#fff;padding-top:env(safe-area-inset-top,0px);box-shadow:0 4px 18px #0003}
.top{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 18px;max-width:1200px;margin:auto}
.logo{font-size:1.4rem;font-weight:800;letter-spacing:2px;white-space:nowrap}
#q{flex:1;min-width:0;width:100%;max-width:420px;padding:11px 18px;border:2px solid transparent;border-radius:30px;font:inherit;background:#fff;outline:0;transition:.2s}
#q:focus{border-color:var(--gold);box-shadow:0 0 0 4px #e0a45844}
nav{display:flex;gap:8px;overflow-x:auto;padding:2px 18px 12px;max-width:1200px;margin:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav a{white-space:nowrap;color:#fff;text-decoration:none;background:#ffffff1c;padding:6px 16px;border-radius:30px;font-size:.9rem;transition:.2s}
nav a:hover{background:#ffffff38}
nav a.on{background:var(--gold);color:#2b1a05;font-weight:700}

/* Info */
.info{display:flex;gap:10px 28px;flex-wrap:wrap;justify-content:center;padding:14px 16px;color:var(--green2);font-size:.92rem;font-weight:600}
.info a{color:var(--brown)}

/* Sections */
main{max-width:1200px;margin:auto;padding:10px 18px 30px}
section{margin-bottom:46px}
h2{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:1.8rem;color:var(--green)}
h2:after{content:"";flex:1;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--gold),transparent);transform:scaleX(-1)}
.note{color:var(--brown);background:#e0a45822;display:inline-block;padding:3px 14px;border-radius:20px;font-size:.85rem;margin:4px 0 12px}

/* Cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin-top:14px}
.card{background:#fff;border-radius:var(--r);overflow:hidden;cursor:pointer;border:1px solid #efe7d6;box-shadow:0 2px 8px #1f4d3714;}
@media(hover:hover){.card{transition:transform .2s}.card:hover{transform:translateY(-4px)}}
@keyframes in{from{opacity:0;transform:translateY(14px)}}
.img{position:relative;height:190px;padding:14px;display:flex;align-items:center;justify-content:center;background:#f6efe0}
.img svg{height:100%;width:auto}
.img img,.big img{width:100%;height:100%;object-fit:cover}
.img img{position:absolute;inset:0}
.emo{font-size:3.6rem}
.tag{position:absolute;top:12px;left:12px;z-index:1;background:var(--green);color:var(--gold2);padding:3px 13px;border-radius:30px;font-weight:800;font-size:.95rem}
.body{padding:14px 16px 16px}
.name{font-weight:800;font-size:1.05rem;color:var(--green)}
.desc{color:var(--mut);font-size:.82rem;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}

/* Modal */
#modal{position:fixed;inset:0;background:#000a;display:none;align-items:center;justify-content:center;padding:16px;z-index:20}
#modal.on{display:flex}
.box{background:#fff;border-radius:30px;max-width:460px;width:100%;max-height:92vh;overflow-y:auto;animation:pop .3s both;box-shadow:0 30px 60px #0006}
.big{height:290px;display:flex;align-items:center;justify-content:center;background:#f6efe0;padding:18px}
.big svg{height:100%;width:auto}
.close{position:sticky;top:12px;float:left;margin:12px;z-index:2;border:0;background:var(--green);color:#fff;border-radius:50%;width:38px;height:38px;font-size:1.1rem;cursor:pointer}
.box .body{padding:20px 24px 26px}
.box h3{margin:0 0 8px;font-size:1.55rem;color:var(--green)}
.box .price{display:inline-block;background:var(--gold);color:#2b1a05;padding:3px 18px;border-radius:30px;font-weight:800;font-size:1.25rem;margin-bottom:8px}
.box p{margin:8px 0}

#empty{display:none;text-align:center;color:var(--mut);padding:50px;font-size:1.1rem}
footer{text-align:center;padding:30px;background:var(--green);color:var(--gold2);font-weight:600}

@media(max-width:560px){
 .grid{grid-template-columns:repeat(2,1fr);gap:12px}
 .img{height:140px}.body{padding:10px 12px 12px}.name{font-size:.95rem}
 h2{font-size:1.4rem}.logo{font-size:1.1rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.cico{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}

/* ===== شاشة الترحيب ===== */
body.lock{overflow:hidden}
#welcome{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;
 background:radial-gradient(circle at 20% 20%,#4b9a73,transparent 45%),linear-gradient(160deg,#1f4d37,#143626);transition:opacity .5s,visibility .5s}
#welcome.out{opacity:0;visibility:hidden}
.wbox{background:#fffdf8;border-radius:32px;padding:34px 28px;max-width:420px;width:100%;text-align:center;box-shadow:0 30px 70px #0007;animation:pop .6s both}
.wlogo{font-size:2.6rem;font-weight:800;letter-spacing:4px;color:var(--green);line-height:1.1}
.wlogo span{color:var(--gold)}
.wbox h2{display:block;margin:16px 0 4px;color:var(--brown);font-size:1.5rem}
.wbox h2:after{display:none}
.wbox p{margin:0 0 16px;color:var(--mut)}
#nameIn{width:100%;padding:14px 18px;border:2px solid #e8dcc4;border-radius:30px;font:inherit;font-size:1.1rem;text-align:center;outline:0;transition:.2s}
#nameIn:focus{border-color:var(--gold);box-shadow:0 0 0 4px #e0a45844}
#nameIn.bad{border-color:#d33;animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.werr{color:#d33;font-size:.85rem;min-height:1.3em;margin:6px 0}
.wbox button{border:0;cursor:pointer;font:inherit;font-weight:800;font-size:1.1rem;color:#2b1a05;background:var(--gold);padding:12px 44px;border-radius:30px;box-shadow:0 6px 16px #e0a45877;transition:.2s}
.wbox button:hover{transform:translateY(-2px)}
.hi{font-size:3.4rem;animation:pop .6s both}
#step2 h2{font-size:1.7rem}
#step2 p{font-size:1.05rem;color:var(--txt)}