/* ============ New sections + states (uses the site's existing palette variables from app.css) ============ */

/* in-page anchors sit below the fixed header */
section[id]{scroll-margin-top:5rem}
body.no-scroll{overflow:hidden}
.section-sep{border-top:1px solid rgba(198,161,91,.14)}

/* ---- loading states ---- */
#load-bar{position:fixed;inset:0 0 auto 0;height:3px;z-index:120;overflow:hidden;background:rgba(198,161,91,.15)}
#load-bar::after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:loadbar 1.1s ease-in-out infinite}
@keyframes loadbar{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(198,161,91,.25);border-top-color:var(--gold);animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- Arabic admin: the sidebar sits on the right, so the content padding must too ---- */
@media (min-width:1024px){ [dir="rtl"] .lg\:pl-64{padding-left:0;padding-right:16rem} }

/* ---- honeypot field for the reservation form: invisible to people, tempting to bots ---- */
/* kept INSIDE the page box (off-screen offsets create a huge horizontal scroll in RTL) but fully invisible and unreachable */
.hp-field{position:absolute !important;left:0;top:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;clip-path:inset(50%)}

/* ================================ OPTICIAN PROFILE ================================ */
.optician-grid{display:grid;gap:2.5rem;align-items:center}
.optician-photo-wrap{position:relative;width:100%;max-width:26rem;margin-inline:auto;padding:0 0 1rem}
.optician-photo{position:relative;aspect-ratio:4/5;border-radius:1.25rem;overflow:hidden;background:var(--champagne);
  box-shadow:0 20px 60px -20px rgba(0,0,0,.5);border:1px solid rgba(198,161,91,.3)}
.optician-photo img{width:100%;height:100%;object-fit:cover;display:block}
.optician-photo-wrap::before{content:"";position:absolute;inset:1.25rem auto 0 -1rem;width:100%;height:calc(100% - 1.25rem);border:1px solid var(--gold);border-radius:1.25rem;opacity:.45;z-index:0;pointer-events:none}
[dir="rtl"] .optician-photo-wrap::before{inset:1.25rem -1rem 0 auto}
.optician-photo{z-index:1}
.optician-badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:1.75rem;padding:0;list-style:none}
.optician-badges li{display:flex;align-items:center;gap:.65rem;padding:.75rem .9rem;border-radius:.9rem;background:#fff;border:1px solid rgba(198,161,91,.22);font-size:.85rem;font-weight:500;color:var(--ink)}
@media (min-width:1024px){
  .optician-grid{grid-template-columns:5fr 6fr;gap:5rem}
  .optician-photo-wrap{max-width:none}
}
@media (max-width:420px){ .optician-badges{grid-template-columns:1fr} }

/* ================================ PORTFOLIO ================================ */
.portfolio-grid{display:grid;gap:.85rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:359px){ .portfolio-grid{grid-template-columns:1fr} }
@media (min-width:640px){ .portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem} }
@media (min-width:960px){ .portfolio-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:1280px){ .portfolio-grid{grid-template-columns:repeat(5,minmax(0,1fr))} }
.portfolio-card{position:relative;display:block;width:100%;aspect-ratio:4/5;padding:0;border-radius:1rem;overflow:hidden;cursor:pointer;background:var(--midnight);
  border:1px solid rgba(198,161,91,.14);box-shadow:0 18px 40px -18px rgba(0,0,0,.8);transition:border-color .3s,box-shadow .3s,transform .3s}
.portfolio-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.portfolio-card:hover,.portfolio-card:focus-visible{border-color:var(--gold);box-shadow:0 22px 50px -18px rgba(198,161,91,.35);transform:translateY(-3px);outline:none}
.portfolio-card:hover img,.portfolio-card:focus-visible img{transform:scale(1.08)}
.portfolio-caption{position:absolute;inset-inline:0;bottom:0;padding:2.2rem .9rem .8rem;text-align:start;font-family:'Playfair Display',serif;font-size:.9rem;font-weight:600;color:var(--offwhite);
  background:linear-gradient(to top,rgba(10,12,16,.92),rgba(10,12,16,0));opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.portfolio-card:hover .portfolio-caption,.portfolio-card:focus-visible .portfolio-caption{opacity:1;transform:none}
@media (hover:none){ .portfolio-caption{opacity:1;transform:none} }

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(10,12,16,.94);backdrop-filter:blur(6px);animation:fadeUp .3s ease}
.lightbox-figure{margin:0;max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;gap:1rem}
.lightbox-figure img{max-width:100%;max-height:72vh;object-fit:contain;border-radius:.9rem;box-shadow:0 30px 80px -20px rgba(0,0,0,.9);border:1px solid rgba(198,161,91,.25)}
.lightbox-figure figcaption{max-width:42rem;text-align:center;color:var(--champagne-100)}
.lightbox-figure figcaption h3{font-family:'Playfair Display',serif;font-size:1.25rem;font-weight:600;color:var(--gold-400)}
.lightbox-figure figcaption p{margin-top:.4rem;font-size:.92rem;line-height:1.6;color:rgba(243,236,223,.75);white-space:pre-line}
.lightbox-btn{position:absolute;display:flex;align-items:center;justify-content:center;width:2.9rem;height:2.9rem;border-radius:9999px;border:1px solid rgba(198,161,91,.4);color:var(--champagne-100);background:rgba(10,12,16,.6);transition:background .2s,color .2s}
.lightbox-btn:hover{background:var(--gold);color:var(--ink)}
.lightbox-close{top:1rem;inset-inline-end:1rem}
.lightbox-prev{inset-inline-start:.75rem;top:50%;margin-top:-1.45rem}
.lightbox-next{inset-inline-end:.75rem;top:50%;margin-top:-1.45rem}
.lightbox-btn[hidden]{display:none}
@media (max-width:640px){ .lightbox-prev,.lightbox-next{top:auto;bottom:1rem;margin-top:0} .lightbox-figure img{max-height:60vh} }

/* ================================ VIDEO ================================ */
.video-grid{display:grid;gap:2.5rem;align-items:center}
@media (min-width:1024px){ .video-grid{grid-template-columns:5fr 6fr;gap:4.5rem} }
.video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:1.25rem;overflow:hidden;background:linear-gradient(135deg,var(--midnight-800),var(--ink));
  border:1px solid rgba(198,161,91,.3);box-shadow:0 30px 70px -25px rgba(0,0,0,.9)}
.video-frame>img,.video-frame>video,.video-frame>iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;display:block}
.video-frame>img,.video-frame>video[muted]{opacity:.9}
.video-frame::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(10,12,16,.55));pointer-events:none}
.video-frame[data-playing]::after{display:none}
.play-btn{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);width:5rem;height:5rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;
  background:var(--gold);color:var(--ink);box-shadow:0 0 0 10px rgba(198,161,91,.25),0 20px 40px -10px rgba(0,0,0,.7);transition:transform .25s,background .25s}
.play-btn:hover{background:var(--gold-400);transform:translate(-50%,-50%) scale(1.08)}
.play-btn svg{margin-inline-start:.2rem}
@media (max-width:480px){ .play-btn{width:4rem;height:4rem} }

/* ================================ ADMIN — Portfolio / Opticien ================================ */
.upload-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;padding:1.25rem;border:2px dashed rgba(10,12,16,.15);border-radius:1rem;background:var(--champagne-50);cursor:pointer;transition:border-color .2s}
.upload-box:hover{border-color:var(--gold-400)}
.photo-preview{position:relative;width:100%;max-width:15rem;aspect-ratio:4/5;border-radius:1rem;overflow:hidden;background:var(--champagne-100);border:1px solid rgba(198,161,91,.3)}
.photo-preview img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-preview{position:relative;width:100%;max-width:18rem;aspect-ratio:16/9;border-radius:.9rem;overflow:hidden;background:var(--champagne-100);border:1px solid rgba(198,161,91,.3)}
.thumb-preview img,.thumb-preview video{width:100%;height:100%;object-fit:cover;display:block}
.works-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}
.work-card{display:flex;flex-direction:column;border-radius:1rem;overflow:hidden;background:#fff;border:1px solid rgba(10,12,16,.08);box-shadow:0 20px 60px -30px rgba(0,0,0,.4)}
.work-card.is-hidden{opacity:.6}
.work-card .work-img{aspect-ratio:4/3;background:var(--champagne-100)}
.work-card .work-img img{width:100%;height:100%;object-fit:cover;display:block}
.work-card .work-body{padding:.7rem .8rem;font-size:.82rem}
.work-actions{display:flex;flex-wrap:wrap;gap:.25rem;padding:.4rem .5rem .6rem;border-top:1px solid rgba(10,12,16,.06)}
.icon-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:9999px;color:rgba(10,12,16,.5);transition:background .2s,color .2s}
.icon-btn:hover{background:var(--champagne-100);color:var(--gold-600)}
.icon-btn.danger:hover{background:#fef2f2;color:#dc2626}
.icon-btn:disabled{opacity:.35;pointer-events:none}
.field-hint{margin-top:.35rem;font-size:.72rem;color:rgba(10,12,16,.45)}
.inline-error{margin-top:.4rem;font-size:.78rem;color:#b91c1c}
.progress-note{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--gold-700,#8a6a3c)}
.admin-form-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:640px){ .admin-form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))} }
.admin-card{border-radius:1rem;background:#fff;padding:1.5rem;box-shadow:0 20px 60px -20px rgba(0,0,0,.3)}

/* reservation-status <select> and other admin selects should never overflow narrow screens */
select{max-width:100%}
@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} }

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.btn-danger-hover:hover{border-color:#f87171 !important;color:#dc2626 !important}

/* two utilities used by the new screens that the precompiled Tailwind file does not contain */
.bg-gold\/20{background-color:rgba(198,161,91,.2)}
.text-ink\/45{color:rgba(10,12,16,.45)}