/* Laqtah — creator application page. Loaded after styles.css.
   Everything here is prefixed .ap- so it cannot collide with the site. */

.ap-hero{position:relative; overflow:hidden; background:var(--acc); color:#F7F3EC;
  padding-block:40px 46px}
.ap-hero > .wrap{position:relative}
.ap-ground{position:absolute; inset:0; width:100%; height:100%; opacity:.11; pointer-events:none}
.ap-hero h1{margin:0; font-size:clamp(30px,7vw,46px); line-height:1.16; letter-spacing:-.01em;
  color:#F7F3EC; text-wrap:balance}
.ap-hero .ap-en{color:#F6CDBE; font-size:clamp(15px,3.4vw,19px); font-weight:600; margin-top:8px}
.ap-rule{height:5px; width:128px; background:rgba(247,243,236,.5); border-radius:99px;
  margin:20px 0 0 auto}
.ap-lede{margin:20px 0 0; color:#F6CDBE; max-width:54ch; font-size:16px}
.ap-lede b{color:#F7F3EC}
.ap-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.ap-chips span{border:1.5px solid rgba(247,243,236,.42); border-radius:99px; padding:6px 14px;
  font-size:13px; font-weight:700}

.ap-main{padding-block:0 56px}
.ap-form{margin-top:-22px; position:relative; display:flex; flex-direction:column; gap:16px}

.ap-set{border:1px solid var(--line); margin:0; padding:24px 20px 22px; background:var(--surf2);
  border-radius:18px; box-shadow:var(--sh)}
.ap-head{display:flex; align-items:center; gap:12px; margin-bottom:2px}
.ap-n{flex:none; width:36px; height:36px; border-radius:10px; background:var(--acc);
  color:var(--on-acc); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px}
.ap-lg{font-size:20px; font-weight:800; line-height:1.25; color:var(--acc-tx)}
.ap-lg .ap-en{color:var(--acc-tx); opacity:.72; font-size:12px}

.ap-q{margin-top:22px}
.ap-q:first-of-type{margin-top:18px}
.ap-lb{display:block; font-size:17px; font-weight:700; line-height:1.4; color:var(--tx)}
.ap-en{display:block; font-family:var(--fs); direction:ltr; text-align:right;
  font-size:12.5px; font-weight:500; color:var(--mut); margin-top:3px; line-height:1.35}
.ap-req{color:var(--acc)}
.ap-opt-tag{font-size:13px; font-weight:500; color:var(--mut)}
.ap-hint{font-size:14px; color:var(--mut); margin-top:5px}

.ap-set input[type=text], .ap-set input[type=url], .ap-set input[type=tel],
.ap-set input[type=email], .ap-set input[type=number], .ap-set select, .ap-set textarea{
  width:100%; margin-top:10px; padding:12px 14px; font:inherit; font-size:16px; color:var(--tx);
  background:var(--page); border:1.5px solid var(--line); border-radius:11px;
  -webkit-appearance:none; appearance:none}
.ap-set select{background-image:none}
.ap-set input:focus-visible, .ap-set select:focus-visible, .ap-set textarea:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px}
.ap-set textarea{min-height:92px; resize:vertical}
.ap-ltr{font-family:var(--fs); direction:ltr; text-align:left}

.ap-opts{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.ap-opt{display:flex; align-items:flex-start; gap:11px; padding:12px 14px; background:var(--page);
  border:1.5px solid var(--line); border-radius:11px; cursor:pointer}
.ap-opt:hover{border-color:var(--acc-line)}
.ap-opt input{flex:none; margin:3px 0 0; width:19px; height:19px; accent-color:var(--acc)}
.ap-opt > span{font-size:16px; font-weight:500; line-height:1.4; color:var(--tx)}
.ap-opt .ap-en{font-size:12px; margin-top:1px}
.ap-opt:has(input:checked){border-color:var(--acc); background:var(--acc-tint)}
.ap-opt:focus-within{outline:2px solid var(--focus); outline-offset:2px}

.ap-money{display:flex; align-items:center; gap:10px; margin-top:10px}
.ap-money input{margin-top:0}
.ap-omr{flex:none; width:31px; height:20px; fill:var(--acc)}

.ap-note{padding:15px 17px; background:var(--acc-tint); border:1px solid var(--acc-line);
  border-radius:13px; font-size:15px; color:var(--tx2); margin-bottom:4px}
.ap-note b{color:var(--acc-tx)}

.ap-send{width:100%; margin-top:4px; padding:16px; font:inherit; font-size:18px; font-weight:800;
  color:var(--on-acc); background:var(--acc); border:0; border-radius:13px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:2px}
.ap-send:hover{background:var(--acc-dk)}
.ap-send .ap-en{color:rgba(255,255,255,.82); text-align:center; font-size:13px}
.ap-err{display:none; margin-top:10px; font-size:14px; font-weight:700; color:var(--acc-tx)}
.ap-err.on{display:block}
/* honeypot: display:none keeps it out of the layout box entirely.
   Off-screen positioning breaks an RTL page with overflow-x:hidden. */
.ap-hp{display:none}

/* thank-you page */
.ap-tick{width:58px; height:58px; border-radius:50%; border:3px solid rgba(247,243,236,.5);
  display:flex; align-items:center; justify-content:center; margin-bottom:22px}
.ap-steps{margin:26px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:14px}
.ap-steps li{display:flex; gap:12px; align-items:flex-start; color:#F6CDBE; font-size:16px}
.ap-steps .ap-dot{flex:none; width:10px; height:10px; border-radius:99px; background:#F6CDBE;
  margin-top:9px}
.ap-steps b{color:#F7F3EC}
.ap-steps .ap-en{color:rgba(246,205,190,.72)}
.ap-back{display:inline-block; margin-top:28px; padding:13px 24px; border-radius:12px;
  background:#F7F3EC; color:var(--acc); font-weight:800; text-decoration:none}
.ap-back:hover{text-decoration:none; background:#fff}

@media (min-width:700px){
  .ap-hero{padding-block:52px 58px}
  .ap-set{padding:28px 26px 26px}
}