/* Andalus Photo Preview — Stable Desktop Frame + Locked Controls V30 */
.an-photo-preview-host{position:relative!important;isolation:isolate}
.an-photo-cue{position:absolute;z-index:6;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:7px;max-width:calc(100% - 24px);padding:8px 11px;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(24,25,27,.76);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.18);backdrop-filter:blur(8px);font-size:.78rem;font-weight:900;line-height:1;pointer-events:none;opacity:0;transform:translateY(5px);transition:opacity .2s ease,transform .2s ease}
.an-photo-cue svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto}
.an-photo-preview-host:hover>.an-photo-cue,.an-photo-preview-host:focus-within>.an-photo-cue{opacity:1;transform:none}
.an-ug-openable{cursor:zoom-in!important;transition:filter .18s ease,transform .18s ease}
.an-ug-openable.is-preview-requested{filter:brightness(.83);transform:scale(.992)}

.an-ug{position:fixed;inset:0;z-index:10050;display:none;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:rgba(15,15,16,.94);backdrop-filter:blur(10px);color:#fff;opacity:0;transition:opacity .18s ease;overflow:hidden}
.an-ug.is-open{display:flex}.an-ug.is-visible{opacity:1}.an-ug *{box-sizing:border-box}
.an-ug__panel{width:min(1240px,100%);height:min(900px,calc(100dvh - 24px));min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;transform:translateY(10px) scale(.992);transition:transform .22s ease}
.an-ug.is-visible .an-ug__panel{transform:none}

/* The title and close control have explicit cells so neither can displace the other. */
.an-ug__top{display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;grid-template-areas:"close title"!important;align-items:center!important;gap:12px!important;min-width:0!important;min-height:48px!important;direction:ltr!important;position:relative!important;inset:auto!important;margin:0!important;padding:0!important;transform:none!important}
.an-ug__title{grid-area:title!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:900;font-size:clamp(.9rem,2vw,1.08rem);direction:rtl;text-align:right;align-self:center}
.an-ug__close,.an-ug__navText{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.11);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:none;-webkit-appearance:none;appearance:none}
.an-ug__close{grid-area:close!important;position:static!important;inset:auto!important;float:none!important;flex:none!important;justify-self:start!important;align-self:center!important;width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;min-height:44px!important;max-height:44px!important;margin:0!important;padding:0!important;border-radius:14px!important;font:inherit!important;font-size:1.55rem!important;font-weight:500!important;line-height:1!important;transform:none!important;z-index:12}
.an-ug__close:hover,.an-ug__close:focus-visible{background:rgba(255,255,255,.2);outline:2px solid rgba(255,255,255,.52);outline-offset:2px}

/* The stage is the definitive image frame. */
.an-ug__stage{position:relative;min-width:0;min-height:0;border-radius:20px;overflow:hidden;background:#111214;display:grid;place-items:center;isolation:isolate}
.an-ug__image{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:transparent;opacity:0;transform:scale(.985);transition:opacity .25s ease,transform .28s ease}
.an-ug__image.is-ready,.an-ug__stage[data-state="shown"] .an-ug__image{opacity:1;transform:none}
.an-ug__status{position:absolute;z-index:4;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:28px;text-align:center;color:#25272a;background:linear-gradient(135deg,rgba(248,247,244,.97),rgba(235,232,226,.96));transition:opacity .24s ease,visibility .24s ease}
.an-ug__status-title{font-size:clamp(1rem,3vw,1.26rem);font-weight:950;line-height:1.45}
.an-ug__status-copy{font-size:.9rem;font-weight:750;color:#62656a;line-height:1.7}
.an-ug__spinner{width:46px;height:46px;border:4px solid rgba(39,41,44,.16);border-top-color:#292b2e;border-radius:50%;animation:anPhotoSpin .8s linear infinite}
.an-ug__status-icon{display:none;width:46px;height:46px;border-radius:50%;place-items:center;background:#292b2e;color:#fff;font-size:1.45rem;font-weight:950;box-shadow:0 9px 26px rgba(31,33,36,.22)}
.an-ug__retry{margin-top:4px;min-height:44px;padding:10px 18px;border:0;border-radius:14px;background:#292b2e;color:#fff;font:inherit;font-weight:900;cursor:pointer}
.an-ug__stage[data-state="ready"] .an-ug__spinner{display:none}
.an-ug__stage[data-state="ready"] .an-ug__status-icon{display:grid}
.an-ug__stage[data-state="shown"] .an-ug__status{opacity:0;visibility:hidden;pointer-events:none}
.an-ug__stage[data-state="error"] .an-ug__spinner{display:none}
.an-ug__stage[data-state="error"] .an-ug__status-icon{display:grid;background:#4a4c50;font-size:0}
.an-ug__stage[data-state="error"] .an-ug__status-icon::before{content:'!';font-size:1.45rem}
.an-ug__count-badge{position:absolute;right:50%;transform:translateX(50%);top:14px;bottom:auto;z-index:5;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(26,28,31,.82);color:#fff;backdrop-filter:blur(10px);font-size:.92rem;font-weight:900;line-height:1.2;box-shadow:0 10px 24px rgba(0,0,0,.18)}

/* Locked one-row desktop controls. Named areas plus explicit row/column stop
   site-wide RTL/button rules from pushing “التالي” into another row. */
.an-ug__bottom{display:grid!important;grid-template-columns:minmax(104px,140px) minmax(0,1fr) minmax(104px,140px)!important;grid-template-rows:minmax(56px,auto)!important;grid-template-areas:"next center prev"!important;grid-auto-flow:row!important;align-items:center!important;gap:12px!important;min-width:0!important;min-height:60px!important;direction:ltr!important;position:relative!important;inset:auto!important;margin:0!important;padding:0!important;transform:none!important;overflow:visible!important}
.an-ug__bottom-center{grid-area:center!important;grid-column:2!important;grid-row:1!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;align-self:center!important;min-width:0!important;max-width:100%!important;position:static!important;inset:auto!important;margin:0!important;padding:0!important;transform:none!important;direction:rtl!important}
.an-ug__count{display:none}
.an-ug__navText{position:static!important;inset:auto!important;float:none!important;flex:none!important;align-self:center!important;width:auto!important;min-width:116px!important;max-width:140px!important;min-height:48px!important;height:48px!important;margin:0!important;padding:0 18px!important;border-radius:14px!important;font:inherit!important;font-weight:900!important;font-size:.98rem!important;line-height:1!important;direction:rtl!important;transform:none!important;z-index:8}
.an-ug__prev{grid-area:prev!important;grid-column:3!important;grid-row:1!important;justify-self:end!important}
.an-ug__next{grid-area:next!important;grid-column:1!important;grid-row:1!important;justify-self:start!important}
.an-ug__navText:hover,.an-ug__navText:focus-visible{background:rgba(255,255,255,.2);outline:2px solid rgba(255,255,255,.42);outline-offset:2px}
.an-ug__thumbs{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;max-width:min(760px,100%);padding:2px;justify-content:center}.an-ug__thumbs::-webkit-scrollbar{display:none}
.an-ug__thumb{position:static!important;inset:auto!important;float:none!important;flex:0 0 54px!important;width:54px!important;min-width:54px!important;max-width:54px!important;height:54px!important;min-height:54px!important;max-height:54px!important;margin:0!important;padding:3px!important;border:1px solid rgba(255,255,255,.2);border-radius:12px!important;background:rgba(255,255,255,.08);cursor:pointer;opacity:.68;transform:none!important}.an-ug__thumb.is-active{opacity:1;border-color:#fff;background:#fff}.an-ug__thumb img{display:block;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;object-fit:cover;border-radius:8px;background:#fff}
@keyframes anPhotoSpin{to{transform:rotate(360deg)}}

@media(max-width:900px),(hover:none){.an-photo-cue{opacity:.92;transform:none;left:9px;bottom:9px;padding:7px 9px;font-size:.72rem}.an-photo-cue span{display:inline}}

/* Desktop and landscape tablet: the panel owns the viewport height. The top
   bar, image stage, and controls each remain inside their own grid track. */
@media (min-width:701px){
  .an-ug{padding:max(16px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left))}
  .an-ug__panel{width:min(1180px,calc(100vw - 44px));height:min(860px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);grid-template-rows:48px minmax(0,1fr) 64px;align-content:stretch;gap:10px;overflow:visible}
  .an-ug__stage{width:min(1120px,100%);height:auto!important;max-height:none!important;justify-self:center;padding:0;border-radius:22px;border:1px solid rgba(255,255,255,.14);box-shadow:0 22px 62px rgba(0,0,0,.34)}
  .an-ug__image{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;padding:10px;object-fit:contain!important;object-position:center center!important;background:transparent;border:0;border-radius:20px;box-shadow:none}
  .an-ug__thumbs{max-width:min(760px,calc(100vw - 360px))}
}

/* Short desktop windows shrink controls before they can overflow. */
@media (min-width:701px) and (max-height:680px){
  .an-ug{padding-block:10px}
  .an-ug__panel{height:calc(100dvh - 20px);max-height:calc(100dvh - 20px);grid-template-rows:42px minmax(0,1fr) 54px;gap:7px}
  .an-ug__top{min-height:42px!important;grid-template-columns:42px minmax(0,1fr)!important}
  .an-ug__close{width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important;min-height:40px!important;max-height:40px!important}
  .an-ug__stage{border-radius:17px}
  .an-ug__image{padding:7px;border-radius:15px}
  .an-ug__bottom{min-height:52px!important;grid-template-rows:52px!important;gap:8px!important}
  .an-ug__navText{min-height:42px!important;height:42px!important}
  .an-ug__thumb{width:46px!important;min-width:46px!important;max-width:46px!important;height:46px!important;min-height:46px!important;max-height:46px!important;flex-basis:46px!important}
}

@media(max-width:700px){
  .an-ug{padding:8px 7px calc(8px + env(safe-area-inset-bottom));overflow:hidden}
  .an-ug__panel{height:calc(100dvh - 16px);grid-template-rows:42px minmax(0,1fr) auto;gap:7px}
  .an-ug__top{grid-template-columns:42px minmax(0,1fr)!important;min-height:42px!important;gap:8px!important}
  .an-ug__close{width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important;min-height:40px!important;max-height:40px!important}
  .an-ug__title{font-size:.88rem}
  .an-ug__stage{border-radius:16px}
  .an-ug__count-badge{top:10px;bottom:auto;min-height:36px;padding:7px 12px;font-size:.86rem}
  .an-ug__status{padding:22px}.an-ug__status-copy{font-size:.84rem}
  .an-ug__bottom{grid-template-columns:1fr 1fr!important;grid-template-rows:44px auto!important;grid-template-areas:'next prev' 'center center'!important;gap:8px!important;min-height:0!important}
  .an-ug__prev{grid-area:prev!important;grid-column:2!important;grid-row:1!important;justify-self:stretch!important}
  .an-ug__next{grid-area:next!important;grid-column:1!important;grid-row:1!important;justify-self:stretch!important}
  .an-ug__bottom-center{grid-area:center!important;grid-column:1 / -1!important;grid-row:2!important;width:100%!important}
  .an-ug__navText{min-width:0!important;max-width:none!important;width:100%!important;min-height:44px!important;height:44px!important;font-size:.94rem!important;padding:0 14px!important}
  .an-ug__thumbs{max-width:100%;width:100%;justify-content:center}
  .an-ug__thumb{flex-basis:46px!important;width:46px!important;min-width:46px!important;max-width:46px!important;height:46px!important;min-height:46px!important;max-height:46px!important}
  .an-photo-cue span{display:none}.an-photo-cue{width:38px;height:38px;justify-content:center;padding:0;border-radius:13px}.an-photo-cue svg{width:19px;height:19px}
}
@media(max-width:460px){.an-ug__bottom{gap:7px!important}.an-ug__navText{font-size:.9rem!important}.an-ug__thumbs{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){.an-ug,.an-ug__panel,.an-ug__image,.an-photo-cue,.an-ug-openable{transition:none!important}.an-ug__spinner{animation-duration:1.3s}}