/* Cirena styles — layout for contact row, oligo blocks, radios, validation */
:root{
  --bg:#f6f5fb;--card:#f4f2fc;--border:#ded9f7;--text:#2f2a44;--muted:#6a5f92;
  --primary:#44306f;--primary-600:#3a2a61;--danger:#b3261e;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial;background:var(--bg);color:var(--text)}
.container{max-width:960px;margin:24px auto;padding:0 16px 24px}
.logo{display:block;width:240px;max-width:65%;margin:12px auto 0}
h1{margin:8px 0 12px;color:var(--primary)}
.legend{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;margin:8px 0 14px}
.section{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px}
.section label{display:flex;flex-direction:column;font-size:14px;color:var(--muted)}
.section input,.section select{height:34px;border:1px solid var(--border);border-radius:12px;padding:0 10px;font-size:15px;background:#fff}
.phone-group{display:flex;gap:8px;align-items:center}
.phone-error{display:none;color:var(--danger);font-size:12px;margin-top:6px}
.phone-error.show{display:block}
.oligo-section{display:flex;flex-direction:column;gap:18px;margin-top:8px}
.oligo-box{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px}
.oligo-header{font-weight:700;margin-bottom:8px}
.label{display:block;font-size:14px;color:var(--muted);margin:8px 0 6px;text-align:left}
input[type="text"],textarea{width:100%;border:1px solid var(--border);border-radius:12px;padding:8px 10px;font-size:15px;background:#fff}
textarea{min-height:70px;resize:vertical}
.counter-row{margin-top:6px;font-size:14px;color:var(--muted)}
.invalid{border-color:var(--danger)!important}
.validation-msg{display:none;margin-top:4px;color:var(--danger);font-size:13px}
.validation-msg.show{display:block}
.scale-row{display:flex;align-items:center;gap:12px;margin-top:8px}
.radio-group{display:flex;align-items:flex-start;gap:24px;margin-left:auto}
.radio-option{display:inline-flex;flex-direction:column;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
.radio-option input[type="radio"]{transform:scale(1.1)}
.button-row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
button{background:var(--primary);color:#fff;border:none;border-radius:10px;padding:10px 14px;font-size:15px;cursor:pointer}
button[disabled]{opacity:.5;cursor:not-allowed}
button:hover{background:var(--primary-600)}
.submit-row{margin-top:12px}



/* === Phone field sizing: keep prefix compact and input wide (single-line at all sizes) === */
.phone-group{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;           /* Never wrap: keep on one line at any width */
}

.phone-group select{
  width: 88px;                /* Narrow, but readable for codes like +971 */
  min-width: 0;               /* Allow shrinking if absolutely needed */
  flex: 0 0 auto;             /* Fixed width */
}

.phone-group input[type="text"],
.phone-group input[type="tel"],
#phoneLocal{
  flex: 1 1 auto;             /* Take all remaining space */
  min-width: 0;               /* Prevent overflow in flex layouts */
}


/* =========================================================
   UNIFORM CONTACT ROW
   Make Name, Email, Phone prefix, and Phone input the same width
   while staying on a single line. This targets only the .section
   that contains the .phone-group (the contact row), leaving other
   sections alone.
   --------------------------------------------------------- */

/* 1) When a .section contains the phone-group, use 4 equal columns. */
.section:has(.phone-group){
  grid-template-columns: repeat(4, 1fr);   /* 4 equal tracks */
}

/* 2) Make the label that holds the phone-group span two columns.
      Inside that label we will layout the prefix + input so each
      equals exactly one grid column width. */
.section label:has(.phone-group){
  grid-column: span 2;                     /* occupies columns 3 and 4 */
}

/* 3) Inside the phone label, turn the .phone-group into a 2-col grid.
      Use the SAME gap as the outer section (12px) so math works out:
      span width = 2*col + gap; inner 2 cols with same gap => each
      inner field equals one outer column width. */
.section label:has(.phone-group) .phone-group{
  display:grid !important;                 /* override earlier flex */
  grid-template-columns: 1fr 1fr;          /* prefix | input */
  gap:12px;                                /* match .section gap */
  align-items:center;
}

/* 4) Make both the dropdown and input fill their grid cells. */
.section label:has(.phone-group) .phone-group select,
.section label:has(.phone-group) .phone-group input[type="tel"],
.section label:has(.phone-group) .phone-group input[type="text"],
.section label:has(.phone-group) #phoneLocal{
  width:100%;
  min-width:0;
  height:34px;                             /* match other inputs */
  border:1px solid var(--border);
  border-radius:12px;
  padding:0 10px;
  font-size:15px;
  background:#fff;
}

/* 5) Keep everything strictly one line (no wrap) at all widths. */
.section label:has(.phone-group) .phone-group{
  white-space:nowrap;
}