:root {
  --paper:#f8f4ed;
  --paper-deep:#efe6d9;
  --ink:#243b34;
  --ink-soft:#657068;
  --gold:#b99b69;
  --gold-deep:#9f7f4f;
  --line:#d9c7aa;
  --arabic:'Amiri',Georgia,serif;
  --latin:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px}
button,input,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
:focus-visible{outline:3px solid #bb965e;outline-offset:3px}
.guest-body{background:#e6ded0;color:var(--ink);font-family:var(--arabic);overflow-x:hidden}
.guest-body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 25%,#faf5eb 0,transparent 45%),radial-gradient(circle at 90% 75%,#d5c8b6 0,transparent 42%);z-index:-1}
body.modal-open{overflow:hidden}
/* The cinematic opening */
.intro{position:fixed;inset:0;z-index:100;overflow:hidden;background:#e3d5c0;color:#fff;transition:opacity .65s ease,transform .65s ease}
.intro.intro-leaving{opacity:0;transform:scale(1.04);pointer-events:none}
.intro video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.intro-wash{position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,39,27,.28),transparent 26%,transparent 52%,rgba(31,35,26,.38));pointer-events:none}
.intro-top{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 37px);display:flex;flex-direction:column;align-items:center;gap:9px}
.intro-tiny{font:600 9px/1.4 var(--sans);letter-spacing:.29em;text-shadow:0 1px 8px #777}
.tiny-diamond{font-size:18px}
.intro-bottom{position:absolute;bottom:calc(66px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;text-shadow:0 3px 16px #5b4d3a80}
.intro-monogram{font:400 clamp(58px,15vw,86px)/.95 var(--latin);letter-spacing:-.04em}
.intro-monogram span{font-style:italic;font-size:.6em;margin:0 .08em;color:#fff4d9}
.intro-bottom p{font:500 10px var(--sans);letter-spacing:.28em;margin:19px 0 0}
.skip-intro{position:absolute;top:calc(27px + env(safe-area-inset-top));right:23px;z-index:2;border:1px solid #ffffff92;background:#ffffff26;backdrop-filter:blur(8px);border-radius:100px;padding:8px 15px;color:white;font:600 13px var(--arabic)}
.skip-intro span{display:inline-block;margin-right:8px}
.intro-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#ffffff58}
.intro-progress>div{height:100%;width:0;background:#fff7e1;transition:width .14s linear}
/* Wedding invitation canvas */
.invitation{width:100%;max-width:490px;margin:0 auto;min-height:100dvh;background:var(--paper);box-shadow:0 14px 70px #4c3a2940;position:relative;isolation:isolate;overflow:hidden}
.invitation.is-pending{visibility:hidden}
.invitation.is-visible{animation:page-show .85s ease both}
@keyframes page-show{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.invitation::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.52;background:radial-gradient(circle at 0 15%,#e8ddc9a0 0,transparent 30%),radial-gradient(circle at 100% 60%,#e8ddc980 0,transparent 32%),repeating-linear-gradient(38deg,transparent 0,transparent 5px,#e7dccb24 6px,transparent 7px)}
.invite-frame{margin:10px;border:1px solid #d9c7a76e;min-height:calc(100dvh - 20px);position:relative;padding-bottom:19px}
.invite-frame::before,.invite-frame::after{content:"";position:absolute;width:24px;height:24px;border-color:#c6aa7d;opacity:.8;pointer-events:none}
.invite-frame::before{top:7px;right:7px;border-top:1px solid;border-right:1px solid}
.invite-frame::after{top:7px;left:7px;border-top:1px solid;border-left:1px solid}
.invite-header{height:104px;display:flex;align-items:center;justify-content:space-between;direction:ltr;padding:22px 25px 0;gap:9px}
.date-mark,.top-note{font:600 9px/1.4 var(--sans);letter-spacing:.14em;color:#7f7c70;white-space:nowrap}
.date-mark span{color:var(--gold);padding:0 3px}
.top-note{font-size:8px;letter-spacing:.09em;text-align:right}
.seal{border:1px solid #c6ac82;border-radius:50%;width:51px;height:51px;display:flex;justify-content:center;align-items:center;color:var(--ink);font:500 24px var(--latin);white-space:nowrap;flex-shrink:0}
.seal span{font:400 9px var(--sans);color:var(--gold);margin:0 2px}
.hero{height:392px;max-width:470px;margin:0 auto;position:relative;isolation:isolate}
.halo{position:absolute;border:1px solid #cfb99070;border-radius:50%;pointer-events:none}
.halo-one{width:250px;height:250px;left:-106px;top:75px}
.halo-two{width:150px;height:150px;right:-82px;bottom:35px}
.hero-arch{position:absolute;top:4px;left:11%;right:11%;height:360px;border:1px solid #c8ac7c;border-bottom:0;border-radius:210px 210px 0 0;background:linear-gradient(150deg,#e4d2b4 0%,#efe4cf 33%,#fff9ef 54%,#e8d9bf 100%);overflow:hidden;z-index:0;box-shadow:inset 0 0 60px #fef5e0aa,0 7px 16px #ddc4a74d}
.hero-arch::before{content:"";position:absolute;inset:6px;border:1px solid #f6e7d0;border-bottom:0;border-radius:200px 200px 0 0}
.arch-rays{position:absolute;inset:-14%;opacity:.38;background:repeating-conic-gradient(from -9deg at 50% 100%,transparent 0deg 12deg,#f9f1e2 13deg 15deg,transparent 16deg 24deg)}
.gold-glow{position:absolute;left:15%;right:15%;top:30%;height:180px;border-radius:50%;background:#fff5de91;filter:blur(43px)}
.person{position:absolute;z-index:1;bottom:0;height:383px;width:auto;max-width:none;filter:drop-shadow(1px 9px 6px #7d6a5733);user-select:none;-webkit-user-drag:none}
.person-saif{left:1.2%;height:370px}
.person-nourhan{right:2.6%;height:378px;z-index:2}
.portrait-floor{position:absolute;bottom:-2px;left:-5px;right:-5px;height:43px;background:linear-gradient(to bottom,transparent,var(--paper) 90%);z-index:3;pointer-events:none}
.little-star{position:absolute;color:#b89a68;font-size:30px;z-index:4}
.star-one{left:7%;top:80px}
.star-two{right:8%;top:158px;font-size:20px}
.invite-copy{text-align:center;padding:0 25px 13px;position:relative}
.tiny-heading{font:600 8px/1.6 var(--sans);letter-spacing:.22em;color:#a18560;direction:ltr;margin-top:-2px}
.divider-ornament{display:flex;justify-content:center;align-items:center;gap:13px;color:var(--gold);font-size:22px;height:30px}
.divider-ornament span{height:1px;width:46px;background:linear-gradient(90deg,transparent,#c9ad82)}
.divider-ornament span:last-child{transform:rotate(180deg)}
.couple-names{font:500 clamp(52px,13vw,74px)/.91 var(--latin);letter-spacing:-.036em;margin:8px auto 0;display:flex;flex-direction:column;align-items:center;direction:ltr;text-shadow:0 2px 0 #fff8ef}
.couple-names i{font:italic 400 53px/.65 var(--latin);color:var(--gold-deep);margin:0}
.engagement-label{font:600 10px/1.5 var(--sans);letter-spacing:.24em;color:var(--gold-deep);margin:19px 0 33px;direction:ltr}
.bismillah{font:700 24px/1.7 var(--arabic);margin:0 0 11px;color:#31473b}
.verse{font:400 20px/1.85 var(--arabic);max-width:315px;margin:0 auto 17px;color:#857456}
.arabic-invite{font:400 22px/1.82 var(--arabic);max-width:347px;margin:0 auto;color:#4e594d}
.event-date{display:flex;align-items:center;justify-content:center;direction:ltr;gap:17px;margin:30px auto 0;max-width:325px;padding:18px 0;border-top:1px solid #d6c7ad;border-bottom:1px solid #d6c7ad}
.date-split{display:flex;flex-direction:column;gap:5px;flex:1;text-align:center}
.date-split span{font:600 9px/1.2 var(--sans);letter-spacing:.15em;color:#7a786e}
.date-split strong{font:400 20px/1.2 var(--arabic);color:var(--ink)}
.date-number{font:500 68px/.9 var(--latin);color:var(--gold-deep);min-width:66px}
.rsvp-ask{font:400 23px var(--arabic);color:var(--ink);margin:22px auto 12px}
.action-area{max-width:335px;margin:0 auto}
.primary-button{min-height:55px;width:100%;display:flex;align-items:center;justify-content:center;gap:24px;border:1px solid var(--ink);border-radius:3px;background:#213a33;color:#fffaf1;box-shadow:0 8px 20px #263e342c;padding:11px 22px;transition:transform .2s ease,background .2s ease,box-shadow .2s ease;font:700 23px var(--arabic)}
.primary-button:hover{transform:translateY(-2px);background:#314f43;box-shadow:0 10px 23px #263e3438}
.primary-button:disabled{opacity:.67;cursor:wait;transform:none}
.primary-button span:last-child{font:400 21px var(--sans);color:#dec69e}
.under-button{font:400 18px var(--arabic);color:#7a7d73;margin:12px 0 5px}
.confirmed{border:1px solid #dbccaf;border-radius:3px;background:#f5eddf;padding:15px 15px 18px;max-width:350px;margin:14px auto 0}
.confirmed-icon{margin:0 auto 0;width:38px;height:38px;border:1px solid #b4976a;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#68806e;font:600 25px var(--sans)}
.confirmed h2{font:700 27px var(--arabic);margin:6px 0 1px}
.confirmed p{font:400 19px/1.7 var(--arabic);margin:0;color:#596457}
.confirmed .confirmed-caption{font-size:17px;color:#8c7c61}
.location-card{margin:16px 22px 24px;border:1px solid #d6c4a3;padding:22px 18px 20px;text-align:center;background:linear-gradient(155deg,#fffbf4,#eee5d5)}
.location-heading{display:flex;justify-content:center;align-items:center;gap:8px;font:600 9px var(--sans);letter-spacing:.12em;color:#a38860;direction:ltr}
.location-icon{font-size:22px;line-height:1}
.location-card h2{font:700 26px var(--arabic);margin:8px 0 2px}
.location-card p{font:400 18px/1.5 var(--arabic);margin:0 0 17px;color:#73796f}
.map-slot{height:208px;background:linear-gradient(135deg,#e9e5da,#d3dbcf);border:1px solid #d4c9b6;overflow:hidden;position:relative}
.map-slot iframe{border:0;display:block;width:100%;height:100%}
.map-button{display:flex;align-items:center;justify-content:center;gap:8px;background:#e1d3bb;border:1px solid #c4a97b;color:var(--ink);text-decoration:none;font:700 19px var(--arabic);padding:8px 6px;margin-top:12px;border-radius:3px;min-height:50px}
.map-button span{font-family:var(--sans);font-weight:400}
.invite-footer{text-align:center;margin:12px auto 0;padding:11px 15px 13px;color:#8d816e}
.footer-flourish{font-size:18px;color:var(--gold)}
.footer-names{font:500 24px var(--latin);direction:ltr;color:#536456;letter-spacing:.02em}
.footer-names i{color:var(--gold-deep);padding:0 4px}
.invite-footer p{font:600 8px var(--sans);letter-spacing:.18em;margin:7px 0 0;direction:ltr}
/* RSVP sheet */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.modal-backdrop{position:absolute;inset:0;background:#0b1917a6;backdrop-filter:blur(6px)}
.modal-dialog{position:relative;width:100%;max-width:490px;max-height:calc(95dvh - env(safe-area-inset-top));overflow:auto;background:#f9f4ec;border-radius:23px 23px 0 0;padding:24px 29px calc(28px + env(safe-area-inset-bottom));box-shadow:0 0 60px #0003;text-align:center;animation:sheet-rise .35s cubic-bezier(.25,.7,.3,1)}
@keyframes sheet-rise{from{transform:translateY(75px);opacity:0}to{transform:translateY(0);opacity:1}}
.close-modal{position:absolute;left:17px;top:15px;width:34px;height:34px;border:1px solid #d3c5b0;border-radius:50%;background:transparent;color:#657569;font:400 30px/22px var(--sans)}
.modal-top-mark{font-size:26px;color:var(--gold);margin-bottom:0}
.modal-overline{font:600 9px var(--sans);letter-spacing:.19em;color:#ab8e63;margin:0 0 8px}
.modal-dialog h2{font:700 35px/1.25 var(--arabic);margin:0;color:var(--ink)}
.modal-subtitle{font:400 20px/1.45 var(--arabic);margin:4px 0 20px;color:#757a70}
.modal-dialog form{text-align:right}
.modal-dialog label{display:block;font:700 19px var(--arabic);color:#46564c;margin:12px 0 5px}
.modal-dialog label span{color:#a36a5b}
.modal-dialog label small{font-size:14px;color:#8c9185;font-weight:400}
.modal-dialog input,.modal-dialog textarea{width:100%;border:1px solid #dacbb6;border-radius:5px;background:#fffdf9;min-height:47px;padding:11px 13px;color:#344c42;outline:none;font:400 18px/1.5 var(--arabic);transition:border-color .2s ease,box-shadow .2s ease;resize:vertical}
.modal-dialog input:focus,.modal-dialog textarea:focus{border-color:#b69b75;box-shadow:0 0 0 3px #c5aa8528}
.modal-dialog input::placeholder,.modal-dialog textarea::placeholder{color:#a6a69b}
.modal-dialog textarea{min-height:110px}
.submit-button{margin-top:20px}
.privacy-note{text-align:center;margin:11px 0 0;color:#8d8b81;font:400 15px var(--arabic)}
.form-error{color:#aa3e31;font:700 16px/1.5 var(--arabic);margin:10px 0 0;background:#fff0ed;padding:9px;border-radius:5px}
/* Admin */
.admin-body{min-height:100dvh;background:#f6f2e9;color:#213a33;font-family:var(--arabic);background-image:radial-gradient(circle at 5% -10%,#e7dbc6 0%,transparent 35%),radial-gradient(circle at 100% 100%,#e5d6bb 0%,transparent 35%)}
.admin-wrap{max-width:850px;margin:0 auto;min-height:100dvh;padding:16px 17px 46px}
.admin-header{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #d2c2a4;padding:10px 4px 16px}
.back-home{font:700 16px var(--arabic);color:var(--ink);text-decoration:none;min-width:75px}
.admin-brand{font:500 35px/.9 var(--latin);direction:ltr}
.admin-brand i{color:var(--gold-deep);font-size:.8em}
.admin-nav-small{font:600 9px var(--sans);color:#9c835d;letter-spacing:.06em;min-width:75px;text-align:left}
.login-panel{max-width:415px;margin:clamp(45px,12vh,110px) auto 0;text-align:center;background:#fffaf2;border:1px solid #dbc9aa;padding:36px 26px 32px;box-shadow:0 14px 40px #4e3c2417}
.login-emblem{font-size:40px;color:#a88a5b}
.mini-overline{font:600 10px var(--sans);letter-spacing:.21em;color:#a08761;margin:6px 0}
.login-panel h1{font:700 39px var(--arabic);margin:0}
.login-panel>p:not(.mini-overline){font:400 20px/1.55 var(--arabic);color:#738075;margin:5px auto 23px}
.login-panel form{text-align:right}
.login-panel label{display:block;font:700 20px var(--arabic);margin-bottom:7px}
.login-panel input{width:100%;height:54px;border:1px solid #d2c4ab;background:white;border-radius:4px;direction:ltr;text-align:center;font:600 23px var(--sans);letter-spacing:.3em}
.login-panel .primary-button{margin-top:17px}
.dashboard-head{padding:28px 2px 12px}
.dashboard-head h1{font:700 clamp(32px,7vw,44px) var(--arabic);margin:0}
.dashboard-head h1 span{font-size:22px;color:var(--gold)}
.dashboard-head>p:last-child{font:400 20px var(--arabic);color:#738075;margin:0}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:15px 0 20px}
.stat{background:#223b33;border:1px solid #345548;color:#e9dcc5;min-height:117px;padding:19px 19px 12px;border-radius:5px;display:flex;flex-direction:column;justify-content:space-between}
.stat span{font:400 17px var(--arabic)}
.stat strong{font:500 48px/1 var(--latin);direction:ltr;text-align:right;color:white}
.admin-tools{background:#fffbf5;border:1px solid #ded0b9;border-radius:5px;padding:13px}
.admin-tools input{width:100%;height:47px;border:1px solid #d7cbb5;border-radius:4px;background:#faf7f0;padding:10px 12px;font:400 17px var(--arabic);color:#263e34;outline:none}
.admin-tools input:focus{border-color:var(--gold)}
.admin-buttons{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.outline-button{border:1px solid #c9b796;background:#faf6ed;border-radius:4px;color:#31493d;flex:1;white-space:nowrap;min-height:40px;padding:6px 9px;text-align:center;text-decoration:none;font:700 15px var(--arabic)}
.outline-button:hover{background:#eae0ce}
.logout-button{color:#9c594a}
.dashboard-status{font:400 17px var(--arabic);min-height:16px;color:#82745c}
.guest-list{display:flex;flex-direction:column;gap:11px}
.guest-card{background:#fffdf9;border:1px solid #ded3c3;border-radius:5px;padding:16px 17px;box-shadow:0 2px 8px #6e51300a}
.guest-card-top{display:flex;align-items:center;gap:12px}
.guest-avatar{height:43px;width:43px;border-radius:50%;background:#e9ddc9;border:1px solid #d0b993;display:flex;align-items:center;justify-content:center;color:#53664f;font:700 27px var(--arabic);flex-shrink:0}
.guest-details{min-width:0}
.guest-details h2{font:700 22px/1.2 var(--arabic);margin:0;overflow-wrap:anywhere}
.guest-details time{font:400 12px var(--sans);color:#9a907e}
.guest-message{font:400 19px/1.7 var(--arabic);background:#f6f1e8;border-right:2px solid #cbb38a;padding:9px 12px;margin:13px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.guest-no-message{font:400 16px var(--arabic);color:#a2a096;margin:9px 0 0}
.no-guests{font:400 22px var(--arabic);color:#777e73;text-align:center;padding:38px 10px;border:1px dashed #d4c5ac;border-radius:4px}
.admin-footer{font:600 11px var(--sans);letter-spacing:.06em;text-align:center;color:#9b927f;margin:28px auto 0;direction:ltr}
@media (max-width:370px){
  .invite-header{padding-inline:18px}.top-note{font-size:7px}.date-mark{font-size:8px}
  .hero{height:354px}.hero-arch{height:328px}.person-saif{height:335px;left:-1%}.person-nourhan{height:346px;right:0}
  .couple-names{font-size:53px}.invite-copy{padding-inline:19px}.arabic-invite{font-size:20px}
  .event-date{gap:8px}.date-number{font-size:58px}.date-split span{font-size:8px}
  .modal-dialog{padding-inline:22px}
}
@media (min-width:491px){
  .invitation{margin-top:18px;margin-bottom:18px;border-radius:5px}
  .modal{align-items:center}.modal-dialog{border-radius:15px;max-height:90dvh}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}