/* ฤกษ์รัก Gallery — guests' gallery, couple's manager, photographer upload (uses tokens from ruekrak.css) */
[hidden]{display:none!important}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body)}
.ph-top{position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.ph-top .wrap{display:flex; align-items:center; gap:10px; min-height:60px}
.ph-top .grow{flex:1}
.ph-mark{display:flex; align-items:center; gap:8px; font:600 1rem var(--f-display); color:var(--ink); text-decoration:none; letter-spacing:.01em}
.ph-mark small{display:block; font:400 .74rem var(--f-body); color:var(--soft)}
.ph-mark img{width:30px; height:30px}
.wrap{max-width:1180px; margin:0 auto; padding:0 16px}
.ph-narrow{max-width:760px}

/* hero */
.ph-hero{position:relative; min-height:min(68vh,560px); display:grid; place-items:end center; overflow:hidden; background:var(--rk-navy); color:var(--rk-ivory)}
.ph-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.92}
.ph-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,24,36,.05) 30%,rgba(14,24,36,.78))}
.ph-hero .in{position:relative; z-index:1; text-align:center; padding:40px 16px 44px}
.ph-hero .eyebrow{display:block; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--rk-gold); margin-bottom:10px}
.ph-eyebrow{display:block; font:500 .85rem var(--f-body); color:var(--gold-ink); margin-bottom:6px}
.ph-hero h1{color:var(--rk-ivory); text-shadow:0 2px 18px rgba(0,0,0,.35); margin:0; font:500 clamp(2rem,6vw,3.4rem)/1.15 var(--f-display)}
.ph-hero h1 em{color:var(--rk-gold); font-style:italic; padding:0 .2em}
.ph-hero p{margin:12px 0 0; color:#E6DED2; font-size:.95rem}
.ph-hero .credit a{color:var(--rk-gold)}
.ph-hero.empty{min-height:300px; place-items:center}

/* toolbar */
.ph-bar{position:sticky; top:60px; z-index:20; background:var(--bg); border-bottom:1px solid var(--line)}
.ph-bar .wrap{display:flex; gap:10px; align-items:center; padding-top:10px; padding-bottom:10px; flex-wrap:wrap}
.ph-tabs{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; flex:1 1 320px; min-width:0}
.ph-tabs::-webkit-scrollbar{display:none}
.ph-tab{flex:0 0 auto; min-height:38px; padding:0 14px; border-radius:var(--r-pill); border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font:500 .85rem var(--f-body); cursor:pointer; white-space:nowrap}
.ph-tab[aria-pressed="true"]{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
.ph-tab .n{opacity:.7; margin-left:4px; font-weight:400}
.ph-acts{display:flex; gap:8px; flex-wrap:wrap}

/* justified grid */
.ph-grid{display:flex; flex-wrap:wrap; gap:6px; padding:16px 0 40px}
.ph-grid::after{content:""; flex-grow:999}
.ph-it{position:relative; flex-grow:var(--r); width:calc(var(--r) * 210px); aspect-ratio:var(--r); margin:0; padding:0; border:0; border-radius:var(--r-sm); overflow:hidden; background:var(--surface-2); cursor:zoom-in}
.ph-it img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease), opacity .3s}
.ph-it:hover img{transform:scale(1.03)}
.ph-it:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.ph-it .sel{position:absolute; top:8px; left:8px; width:26px; height:26px; border-radius:50%; border:2px solid #fff; background:rgba(0,0,0,.25); box-shadow:0 1px 4px rgba(0,0,0,.4); display:none; place-items:center; color:#fff}
.selecting .ph-it{cursor:pointer}
.selecting .ph-it .sel{display:grid}
.ph-it.on .sel{background:var(--rk-gold); border-color:var(--rk-gold); color:var(--rk-navy)}
.ph-it.on img{opacity:.75}
.ph-it .fav{position:absolute; right:8px; bottom:8px; color:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)); font-size:1rem; pointer-events:none}
.ph-it .badge{position:absolute; left:8px; bottom:8px; padding:2px 8px; border-radius:var(--r-pill); background:rgba(14,24,36,.72); color:#fff; font-size:.7rem}
@media (max-width:640px){ .ph-it{width:calc(var(--r) * 130px)} .ph-grid{gap:4px} }
.ph-empty{padding:60px 16px; text-align:center; color:var(--soft)}
.ph-more{display:flex; justify-content:center; padding:0 0 40px}

/* bottom selection bar */
.ph-selbar{visibility:hidden; position:fixed; left:50%; bottom:16px; transform:translate(-50%,140%); z-index:40; display:flex; gap:8px; align-items:center; padding:10px 12px 10px 18px; border-radius:var(--r-pill); background:var(--rk-navy); color:var(--rk-ivory); box-shadow:var(--sh-2); transition:transform .3s var(--ease); max-width:calc(100% - 24px)}
.ph-selbar.show{transform:translate(-50%,0); visibility:visible}
.ph-selbar .btn{min-height:38px}
.ph-selbar .btn.ghost{color:var(--rk-ivory); border-color:rgba(247,242,235,.35)}
.ph-selbar .btn.ghost:hover{background:rgba(247,242,235,.1); color:var(--rk-ivory)}

/* lightbox */
.ph-lb{position:fixed; inset:0; z-index:60; background:#0B1118; display:none; flex-direction:column; color:#fff; touch-action:pan-y}
.ph-lb.open{display:flex}
.ph-lb-top{display:flex; align-items:center; gap:8px; padding:10px 12px; padding-top:max(10px,env(safe-area-inset-top))}
.ph-lb-top .grow{flex:1; font-size:.85rem; color:#C9D1DB}
.ph-lb-stage{flex:1; position:relative; min-height:0; overflow:hidden}
.ph-lb-stage img{position:absolute; inset:0; margin:auto; max-width:100%; max-height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none}
.ph-ic{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.08); color:#fff; cursor:pointer; text-decoration:none; font-size:1.1rem}
.ph-ic:hover{background:rgba(255,255,255,.18)}
.ph-ic svg{width:20px; height:20px}
.ph-ic.on{color:#F28CA3}
.ph-nav{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px}
.ph-nav.prev{left:12px} .ph-nav.next{right:12px}
@media (max-width:640px){ .ph-nav{display:none} }

/* dialogs */
.ph-dlg{border:0; padding:0; border-radius:16px; background:var(--surface); color:var(--ink); width:min(520px,calc(100% - 24px)); box-shadow:var(--sh-2)}
.ph-dlg::backdrop{background:rgba(8,13,20,.6)}
.ph-dlg .in{padding:24px}
.ph-dlg h2{margin:0 0 8px; font:500 1.4rem var(--f-display)}
.ph-dlg ul{padding-left:20px; color:var(--soft); font-size:.9rem; line-height:1.7}
.ph-dlg .row{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:18px}
.ph-check{display:flex; gap:10px; align-items:flex-start; font-size:.92rem; margin-top:10px}
.ph-check input{margin-top:3px; flex:0 0 auto}
.ph-msg{margin-top:12px; font-size:.9rem}
.ph-msg.err{color:var(--bad)}

.ph-foot{border-top:1px solid var(--line); padding:26px 0 40px; color:var(--soft); font-size:.85rem; text-align:center}
.ph-foot a{color:var(--gold-ink)}

/* panels (manage + upload) */
.ph-page{padding:28px 0 60px}
.ph-h1{margin:0; font:500 clamp(1.6rem,4vw,2.2rem)/1.2 var(--f-display)}
.ph-sub{margin:6px 0 0; color:var(--soft)}
.ph-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-1); padding:20px; margin-top:16px}
.ph-card h2{margin:0 0 6px; font:500 1.15rem var(--f-display); display:flex; align-items:center; gap:8px}
.ph-card p{margin:0 0 10px; color:var(--soft); font-size:.9rem}
.ph-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px}
.ph-tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px}
.ph-tile b{display:block; font:600 1.3rem var(--f-display); color:var(--ink); white-space:nowrap}
@media (max-width:560px){ .ph-tiles{grid-template-columns:repeat(2,1fr)} }
.ph-tile span{font-size:.8rem; color:var(--soft)}
.ph-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.ph-row input{flex:1 1 260px}
.ph-switch{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 0; border-top:1px solid var(--line)}
.ph-switch:first-of-type{border-top:0}
.ph-switch b{display:block; font-weight:500}
.ph-switch small{color:var(--soft)}
.ph-switch input{width:44px; height:24px; appearance:none; -webkit-appearance:none; border-radius:var(--r-pill); background:var(--line-strong); position:relative; cursor:pointer; flex:0 0 auto; border:0; min-height:0; padding:0; transition:background .2s}
.ph-switch input::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s var(--ease)}
.ph-switch input:checked{background:var(--gold-ink)}
.ph-switch input:checked::after{transform:translateX(20px)}
.ph-switch input:disabled{opacity:.45; cursor:not-allowed}
.ph-note{padding:12px 14px; border-radius:var(--r); background:var(--warn-bg); color:var(--warn); font-size:.88rem; margin-top:16px}
.ph-note.ok{background:var(--ok-bg); color:var(--ok)}
.ph-msgbox{width:100%; min-height:110px; font-size:.88rem}

/* upload */
.ph-drop{display:grid; place-items:center; text-align:center; gap:8px; min-height:240px; margin-top:16px; padding:28px 16px; border:2px dashed var(--line-strong); border-radius:16px; background:var(--surface); cursor:pointer; transition:border-color .2s, background .2s}
.ph-drop:hover,.ph-drop.over{border-color:var(--gold-ink); background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.ph-drop svg{width:44px; height:44px; color:var(--gold-ink)}
.ph-drop b{font:500 1.15rem var(--f-display)}
.ph-drop span{color:var(--soft); font-size:.88rem}
.ph-prog{height:10px; border-radius:var(--r-pill); background:var(--surface-2); overflow:hidden; margin:12px 0 8px}
.ph-prog i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--rk-gold),#E0C28F); transition:width .3s}
.ph-counts{display:flex; gap:14px; flex-wrap:wrap; font-size:.88rem; color:var(--soft)}
.ph-counts b{color:var(--ink)}
.ph-fails{margin:10px 0 0; padding-left:18px; font-size:.84rem; color:var(--bad); max-height:180px; overflow:auto}
.ph-thumbs{display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:4px; margin-top:12px}
.ph-thumbs img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; background:var(--surface-2)}
.ph-steps{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin-top:16px}
.ph-steps div{display:flex; gap:10px; align-items:flex-start; font-size:.88rem; color:var(--soft)}
.ph-steps i{flex:0 0 auto; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--surface-2); color:var(--gold-ink); font:600 .85rem var(--f-body); font-style:normal}

/* manager grid */
.ph-mgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:6px; margin-top:12px}
.ph-mgrid .ph-it{width:auto; aspect-ratio:1; cursor:pointer}
.ph-mgrid .ph-it .sel{display:grid}
.ph-mgrid .ph-it.hid img{opacity:.35}
.ph-pin{max-width:360px; margin:40px auto}