/* Production mobile hardening for Flash Diamond Eid gateway */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-gutter: clamp(1rem, 4vw, 1.5rem);
}

html,
body,
#root{
  width:100%;
  min-width:320px;
  min-height:100%;
  overflow-x:hidden;
}

body{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overscroll-behavior-y:none;
}

main{
  width:100%;
  min-height:100svh;
}

button,
input{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

button:focus-visible,
input:focus-visible{
  outline:2px solid #c9a84c;
  outline-offset:3px;
}

.hero-gate,
.showcase-section,
.studio-section{
  min-height:100svh;
  padding-top:max(var(--safe-top), clamp(1.25rem, 4vw, 3rem));
  padding-bottom:max(var(--safe-bottom), clamp(1.25rem, 4vw, 3rem));
}

.hero-gate__content,
.showcase-header,
.studio-panel{
  width:100%;
}

.hero-gate__logo,
.showcase-card,
.studio-form__header,
.studio-form__field input,
.studio-actions button{
  transform:translateZ(0);
}

.showcase-section{
  justify-content:flex-start;
}

.showcase-grid{
  align-items:stretch;
}

.showcase-card{
  min-height:168px;
}

.showcase-card__logo img,
.studio-form__logo img,
.card-logo img{
  image-rendering:auto;
}

.studio-section{
  align-items:flex-start;
  overflow:visible;
}

.studio-panel{
  margin-inline:auto;
}

.studio-form__field input{
  font-size:16px;
}

.greeting-card{
  contain:layout paint;
  transform:translateZ(0);
}

.greeting-card__bg-image{
  background:#fff;
}

.greeting-card--background .greeting-card__footer{
  visibility:hidden;
}

.greeting-card__message,
.greeting-card__name{
  overflow-wrap:anywhere;
}

@media (max-width: 860px){
  .hero-gate{
    align-items:flex-start;
  }

  .hero-gate__content{
    min-height:calc(100svh - var(--safe-top) - var(--safe-bottom) - 2.5rem);
    justify-content:center;
  }

  .showcase-section{
    gap:1.4rem;
  }

  .showcase-header{
    max-width:560px;
  }

  .showcase-grid{
    width:min(100%, 560px);
    margin-inline:auto;
  }

  .studio-panel{
    grid-template-columns:1fr !important;
    gap:1.2rem;
    max-width:560px;
  }

  .studio-form{
    order:1;
    gap:1rem;
  }

  .studio-preview{
    order:2;
    position:static !important;
  }

  .studio-form__header,
  .studio-form__field,
  .studio-actions{
    width:100%;
  }

  .studio-actions{
    position:sticky;
    bottom:max(var(--safe-bottom), .75rem);
    z-index:30;
    padding:.55rem;
    margin-inline:-.15rem;
    border:1px solid rgba(201,168,76,.18);
    border-radius:18px;
    background:rgba(255,255,255,.88);
    box-shadow:0 12px 34px rgba(0,0,0,.08);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }

  .studio-preview .greeting-card{
    width:min(390px, calc(100vw - 2rem), calc((100svh - 9rem) * .5625));
    min-width:280px;
  }
}

@media (max-width: 640px){
  .hero-gate{
    padding-inline:var(--mobile-gutter);
  }

  .hero-gate__content{
    gap:1.25rem;
    padding-inline:0;
  }

  .hero-gate__logo{
    width:min(68vw, 220px);
    min-height:72px;
    padding:.9rem;
    border-radius:18px;
  }

  .hero-gate__logo img{
    max-height:68px;
  }

  .hero-gate__kicker{
    font-size:.78rem;
    letter-spacing:.06em;
  }

  .hero-gate__title h1{
    font-size:clamp(2.35rem, 14vw, 3.6rem);
    line-height:1.08;
  }

  .hero-gate__subtitle{
    max-width:26rem;
    font-size:clamp(.95rem, 4vw, 1.1rem);
    line-height:1.75;
  }

  .hero-gate__button{
    width:min(100%, 330px);
    min-height:54px;
    padding:.9rem 1.3rem;
  }

  .showcase-section{
    padding-inline:var(--mobile-gutter);
    justify-content:flex-start;
  }

  .showcase-header h2{
    font-size:clamp(1.45rem, 7vw, 1.95rem);
  }

  .showcase-grid{
    grid-template-columns:1fr !important;
    gap:.8rem;
    width:100%;
  }

  .showcase-card,
  .showcase-card--parent{
    min-height:132px;
    padding:1.1rem;
    border-radius:18px;
  }

  .showcase-card--parent{
    flex-direction:row;
    text-align:start;
    justify-content:flex-start;
  }

  .showcase-card--parent .showcase-card__info{
    text-align:start;
  }

  .showcase-card__logo,
  .showcase-card--parent .showcase-card__logo{
    width:132px;
    height:58px;
    flex:0 0 132px;
  }

  .showcase-card__info strong{
    font-size:1rem;
  }

  .studio-section{
    padding:calc(var(--safe-top) + 1rem) var(--mobile-gutter) calc(var(--safe-bottom) + 1.2rem);
  }

  .studio-panel{
    gap:1rem;
  }

  .studio-back-btn{
    min-height:42px;
  }

  .studio-form__header{
    padding:.85rem;
    border-radius:16px;
  }

  .studio-form__logo{
    width:58px;
    height:38px;
  }

  .studio-form__header strong{
    font-size:.98rem;
    line-height:1.35;
  }

  .studio-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:.5rem;
  }

  .studio-actions button{
    width:100%;
    min-height:48px;
    flex-basis:auto !important;
  }

  .studio-preview .greeting-card{
    width:min(100%, calc(100vw - 2rem), calc((100svh - 10rem) * .5625));
    min-width:270px;
    border-radius:18px;
  }

  .greeting-card--background .greeting-card__frame{
    grid-template-rows:24% 1fr 8%;
    padding:7% 7%;
  }

  .greeting-card--background .greeting-card__body{
    justify-content:flex-start;
    gap:.35rem;
  }

  .greeting-card--background .greeting-card__calligraphy-artwork{
    width:50%;
    margin-bottom:.45rem;
  }

  .greeting-card--background .greeting-card__message--ar{
    max-width:88%;
    font-size:clamp(.74rem, 3.2vw, .95rem);
    line-height:1.65;
  }

  .greeting-card--background .greeting-card__message--en{
    max-width:88%;
    font-size:clamp(.58rem, 2.65vw, .72rem);
    line-height:1.45;
  }

  .greeting-card--background .greeting-card__name{
    font-size:clamp(.88rem, 4vw, 1.16rem);
  }
}

@media (max-width: 360px){
  .showcase-card__logo,
  .showcase-card--parent .showcase-card__logo{
    width:112px;
    flex-basis:112px;
  }

  .studio-preview .greeting-card{
    min-width:250px;
  }
}

.fd-export-notice{
  position:fixed;
  inset:auto max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  z-index:99999;
  direction:rtl;
  font-family:Tajawal,Cairo,system-ui,sans-serif;
}
.fd-export-notice>div{
  display:grid;
  gap:.35rem;
  padding:1rem;
  border:1px solid rgba(201,168,76,.28);
  border-radius:18px;
  background:rgba(255,255,255,.96);
  color:#1a1a2e;
  box-shadow:0 16px 42px rgba(0,0,0,.14);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.fd-export-notice strong{font-size:.98rem;font-weight:800}
.fd-export-notice span{font-size:.84rem;line-height:1.55;color:#555}
.fd-export-notice a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin-top:.2rem;border-radius:999px;background:#1f9d9a;color:#fff;text-decoration:none;font-weight:800}