/* RIZQ Listings — only what the site's own stylesheet does not already provide.
   The form reuses .lead-card, .lead-form, .field, .btn and .lead-note, so it
   inherits the existing type, spacing and colours. Everything below is scoped to
   .rizq-ls and cannot reach the rest of the site. */

.rizq-ls [hidden]{display:none!important}

/* section legends inside the form grid */
.rizq-ls .rizq-ls-legend{
  grid-column:1/-1;margin:18px 0 -4px;display:flex;align-items:center;gap:12px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep,#8F6B26);font-weight:500;
}
.rizq-ls .rizq-ls-legend::after{content:"";flex:1;height:1px;background:var(--line,rgba(25,24,32,.11))}
.rizq-ls .rizq-ls-legend:first-of-type{margin-top:4px}

/* "optional" marker on a label */
.rizq-ls .field label em{
  font-style:normal;opacity:.55;text-transform:none;letter-spacing:.02em;font-size:.92em;
}

.rizq-ls .rizq-ls-hint{
  margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--soft,#5D5B63);
}

/* radios, which the site CSS has no styling for */
.rizq-ls .rizq-ls-radios{display:flex;flex-wrap:wrap;gap:8px}
.rizq-ls .rizq-ls-radio{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--line,rgba(25,24,32,.11));border-radius:2px;
  padding:9px 14px;font-size:14px;line-height:1.3;
  transition:border-color .25s,background .25s;
}
.rizq-ls .rizq-ls-radio:hover{border-color:var(--line-gold,rgba(185,143,62,.32))}
.rizq-ls .rizq-ls-radio input{accent-color:var(--gold,#B98F3E);margin:0}
.rizq-ls .rizq-ls-radio:has(input:checked){
  border-color:var(--gold,#B98F3E);background:rgba(185,143,62,.07);
}
.rizq-ls .rizq-ls-radio:has(input:focus-visible){outline:2px solid var(--gold-deep,#8F6B26);outline-offset:2px}

/* the consent tick */
.rizq-ls .rizq-ls-check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:14px;line-height:1.55}
.rizq-ls .rizq-ls-check input{accent-color:var(--gold,#B98F3E);margin-top:4px;flex:0 0 auto}

/* photos */
.rizq-ls .rizq-ls-pics input[type=file]{
  width:100%;font-size:14px;padding:14px;cursor:pointer;
  border:1px dashed var(--line-gold,rgba(185,143,62,.32));border-radius:3px;
  background:rgba(185,143,62,.04);
}
.rizq-ls .rizq-ls-pics input[type=file]::file-selector-button{
  font:inherit;font-size:13px;cursor:pointer;margin-inline-end:12px;
  border:1px solid var(--line,rgba(25,24,32,.11));border-radius:2px;
  padding:7px 14px;background:var(--white,#fff);color:inherit;
}
.rizq-ls .rizq-ls-thumbs{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-top:12px;
}
.rizq-ls .rizq-ls-thumb{position:relative;aspect-ratio:4/3;border-radius:3px;overflow:hidden;background:var(--sand,#EDE3CF)}
.rizq-ls .rizq-ls-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rizq-ls .rizq-ls-drop{
  position:absolute;inset-block-start:4px;inset-inline-end:4px;
  width:22px;height:22px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(25,24,32,.72);color:#fff;font-size:15px;line-height:1;
  display:grid;place-items:center;padding:0;
}
.rizq-ls .rizq-ls-drop:hover{background:rgba(25,24,32,.9)}
.rizq-ls .rizq-ls-status{
  margin:10px 0 0;font-size:12.5px;color:var(--soft,#5D5B63);
  font-variant-numeric:tabular-nums;
}

/* validation summary */
.rizq-ls .rizq-ls-errors{
  border-inline-start:3px solid #96382F;background:rgba(150,56,47,.07);
  padding:14px 18px;margin:0 0 20px;border-radius:0 2px 2px 0;
}
.rizq-ls .rizq-ls-errors ul{margin:0;padding-inline-start:18px;font-size:14px;line-height:1.6}
.rizq-ls .rizq-ls-errors li{margin:0}

/* the thank-you panel */
.rizq-ls .rizq-ls-done{text-align:center;padding:14px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:14px}
.rizq-ls .rizq-ls-tick{width:46px;height:46px;color:var(--gold,#B98F3E)}
.rizq-ls .rizq-ls-done .lead-title{margin:0}
.rizq-ls .rizq-ls-done .lead-micro{margin:0;max-width:42ch}
.rizq-ls .rizq-ls-ref{
  margin:0;font-size:13px;letter-spacing:.06em;color:var(--soft,#5D5B63);
  font-variant-numeric:tabular-nums;
}
.rizq-ls .rizq-ls-done .btn{margin-top:4px}

/* the honeypot: present for a bot, gone for everyone else */
.rizq-ls .rizq-ls-hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

/* the licence line on a published card */
.rizq-root .rizq-ls-licence{
  margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line,rgba(25,24,32,.11));
  font-size:11px;letter-spacing:.04em;color:var(--soft,#5D5B63);
  display:flex;flex-wrap:wrap;gap:4px 10px;
}
.rizq-root .rizq-ls-licence span{opacity:.75}

@media (max-width:520px){
  .rizq-ls .rizq-ls-radios{flex-direction:column;align-items:stretch}
  .rizq-ls .rizq-ls-radio{justify-content:flex-start}
}

/* ============================================================
   Bigger, calmer fields.

   The theme pins every input to height:40px while the line box needs 42,
   so the text was being clipped along the bottom. Releasing the height and
   setting a real minimum fixes the clipping and gives a 52px target, which
   is comfortably above the 44px a thumb needs. 16px type is what stops iOS
   zooming the page the moment a field is focused.
   ============================================================ */
.rizq-ls .lead-form .field input,
.rizq-ls .lead-form .field select,
.rizq-ls .lead-form .field textarea{
  height:auto;min-height:52px;line-height:1.5;font-size:16px;
  padding:14px 2px;
}
.rizq-ls .lead-form .field textarea{min-height:104px;padding-block:12px}
.rizq-ls .lead-form .field select{background-position:right 4px center;padding-inline-end:26px}
.rizq-ls.rizq-ar .lead-form .field select{background-position:left 4px center;padding-inline-end:2px;padding-inline-start:26px}
.rizq-ls .lead-form .field label{margin-bottom:-2px}

/* the +966 that saves typing it */
.rizq-ls .rizq-ls-tel{display:flex;align-items:stretch;gap:10px}
.rizq-ls .rizq-ls-tel i{
  font-style:normal;font-size:16px;color:var(--soft,#5D5B63);
  display:flex;align-items:center;padding-bottom:2px;
  border-bottom:1px solid rgba(25,24,32,.2);flex:none;
}
.rizq-ls .rizq-ls-tel input{flex:1;min-width:0}

/* ---------------- the four steps ---------------- */
.rizq-ls .wiz-bar{display:none}
.rizq-ls .wiz-nav{display:flex;gap:12px;align-items:center;margin-top:26px;flex-wrap:wrap}
.rizq-ls .wiz-nav .btn{flex:1;min-width:150px;padding:17px 26px}
.rizq-ls .wiz-head{display:none}

/* everything above is the no-script view: one page, one submit button.
   the script adds .is-wizard and the steps come alive. */
.rizq-ls .is-wizard .wiz-bar{
  display:flex;list-style:none;margin:26px 0 0;padding:0;gap:6px;
}
.rizq-ls .is-wizard .wiz-bar li{
  flex:1;display:flex;flex-direction:column;gap:7px;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft,#5D5B63);opacity:.5;transition:opacity .3s,color .3s;
}
.rizq-ls.rizq-ar .is-wizard .wiz-bar li{letter-spacing:0;font-size:11.5px;text-transform:none}
.rizq-ls .is-wizard .wiz-bar li::before{
  content:"";display:block;height:3px;border-radius:2px;background:var(--line,rgba(25,24,32,.11));
  transition:background .3s;
}
.rizq-ls .is-wizard .wiz-bar li i{display:none}
.rizq-ls .is-wizard .wiz-bar li.is-done,
.rizq-ls .is-wizard .wiz-bar li.is-on{opacity:1;color:var(--gold-deep,#8F6B26)}
.rizq-ls .is-wizard .wiz-bar li.is-done::before,
.rizq-ls .is-wizard .wiz-bar li.is-on::before{background:var(--gold,#B98F3E)}

.rizq-ls .is-wizard .wiz-step{display:none}
.rizq-ls .is-wizard .wiz-step.is-on{display:block;animation:rizqIn .32s cubic-bezier(.22,.61,.36,1)}
@keyframes rizqIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rizq-ls .is-wizard .wiz-head{display:block;margin:26px 0 -6px}
.rizq-ls .is-wizard .wiz-head b{
  display:block;font-family:var(--ff-display,Georgia,serif);font-weight:500;
  font-size:21px;color:var(--ink,#191820);line-height:1.25;
}
.rizq-ls.rizq-ar .is-wizard .wiz-head b{font-weight:700;font-size:19px}
.rizq-ls .is-wizard .wiz-head span{display:block;margin-top:5px;font-size:13.5px;color:var(--soft,#5D5B63);line-height:1.6}
.rizq-ls .is-wizard .lead-form{margin-top:20px}

/* ---------------- roomier choices ---------------- */
.rizq-ls .rizq-ls-radio{padding:14px 18px;font-size:15px;min-height:52px}
.rizq-ls .rizq-ls-radios.is-wide{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rizq-ls .rizq-ls-radios.is-wide .rizq-ls-radio{justify-content:center;text-align:center}
.rizq-ls .rizq-ls-check{font-size:14.5px;padding:4px 0}
.rizq-ls .rizq-ls-check input{width:20px;height:20px;margin-top:2px}

/* ---------------- the photo drop zone ---------------- */
.rizq-ls .rizq-ls-pics input[type=file]{
  position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip-path:inset(50%);
}
.rizq-ls .rizq-ls-pics{position:relative}
.rizq-ls .rizq-ls-pics > label.rizq-ls-picker{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;
  padding:30px 22px;cursor:pointer;letter-spacing:normal;text-transform:none;
  border:1.5px dashed var(--line-gold,rgba(185,143,62,.32));border-radius:5px;
  background:rgba(185,143,62,.05);transition:border-color .25s,background .25s;
  color:var(--soft,#5D5B63);font-size:13px;
}
.rizq-ls .rizq-ls-pics > label.rizq-ls-picker:hover{border-color:var(--gold,#B98F3E)}
.rizq-ls .rizq-ls-pics > label.rizq-ls-picker svg{width:30px;height:30px;color:var(--gold,#B98F3E)}
.rizq-ls .rizq-ls-pics > label.rizq-ls-picker b{
  font-size:15px;font-weight:500;color:var(--ink,#191820);letter-spacing:normal;text-transform:none;
}
.rizq-ls .rizq-ls-pics > label.rizq-ls-picker span{max-width:40ch;line-height:1.55}

@media (max-width:640px){
  .rizq-ls .is-wizard .wiz-bar li span{display:none}
  .rizq-ls .wiz-nav .btn{min-width:0}
  .rizq-ls .rizq-ls-radios.is-wide{grid-template-columns:1fr}
}

/* ============================================================
   Ticks and dots you can actually see.

   The theme sets appearance:none, a transparent background and no border on
   every input inside .field — which on a checkbox or a radio removes the
   control itself, leaving a label with nothing to tick. These draw them back:
   a gold square with a white tick, and a gold dot. The option text also gets
   its own treatment, because .field label is uppercase gold micro-type meant
   for field names, not for a sentence someone has to read and agree to.
   ============================================================ */

/* the authorisation tick */
.rizq-ls .lead-form .field.rizq-ls-consent{
  margin-top:6px;padding:16px 18px;border-radius:4px;
  background:rgba(185,143,62,.06);border:1px solid var(--line-gold,rgba(185,143,62,.32));
}
.rizq-ls .lead-form .field.rizq-ls-consent label.rizq-ls-check{
  display:flex;gap:13px;align-items:flex-start;cursor:pointer;
  font-size:14.5px;line-height:1.6;font-weight:400;
  letter-spacing:normal;text-transform:none;color:var(--text,#2B2A31);
}
.rizq-ls .lead-form .field .rizq-ls-check input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  flex:0 0 24px;width:24px;height:24px;min-height:0;margin:1px 0 0;padding:0;
  border:1.5px solid var(--gold,#B98F3E);border-radius:3px;
  background:var(--white,#fff);cursor:pointer;position:relative;
  transition:background .2s,border-color .2s;
}
.rizq-ls .lead-form .field .rizq-ls-check input[type=checkbox]:hover{border-color:var(--gold-deep,#8F6B26)}
.rizq-ls .lead-form .field .rizq-ls-check input[type=checkbox]:checked{
  background:var(--gold,#B98F3E);border-color:var(--gold,#B98F3E);
}
.rizq-ls .lead-form .field .rizq-ls-check input[type=checkbox]:checked::after{
  content:"";position:absolute;inset-inline-start:8px;top:3.5px;
  width:6px;height:12px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.rizq-ls .lead-form .field .rizq-ls-check input[type=checkbox]:focus-visible{
  outline:2px solid var(--gold-deep,#8F6B26);outline-offset:2px;
}

/* the choice dots, and their text */
.rizq-ls .lead-form .field label.rizq-ls-radio{
  font-size:15px;line-height:1.4;font-weight:400;
  letter-spacing:normal;text-transform:none;color:var(--ink,#191820);
}
.rizq-ls .lead-form .field .rizq-ls-radio input[type=radio]{
  appearance:none;-webkit-appearance:none;
  flex:0 0 20px;width:20px;height:20px;min-height:0;margin:0;padding:0;
  border:1.5px solid rgba(25,24,32,.28);border-radius:50%;
  background:var(--white,#fff);cursor:pointer;position:relative;
  transition:border-color .2s;
}
.rizq-ls .lead-form .field .rizq-ls-radio input[type=radio]:checked{border-color:var(--gold,#B98F3E)}
.rizq-ls .lead-form .field .rizq-ls-radio input[type=radio]:checked::after{
  content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--gold,#B98F3E);
}
.rizq-ls .lead-form .field .rizq-ls-radio input[type=radio]:focus-visible{
  outline:2px solid var(--gold-deep,#8F6B26);outline-offset:2px;
}