/* =========================================================
   Sardar Trust Eye Hospital - online FCPS application (/residency/apply)
   Builds on style.css: the same inputs, labels and buttons, and the same
   card panels as the booking page (white, hairline border, --r-xl corners,
   --shadow). On top of that, what this one long form needs: numbered
   section cards, the proforma's tables, yes/no choices, upload fields and
   a submit bar that stays in view.
   ========================================================= */

.ra-page{max-width:1080px;}
.ra-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.ra-required{color:#c0392b;font-weight:700;}
.ra-optional{font-weight:400;color:var(--muted);font-size:.8125rem;}
.ra-hint{font-size:.875rem;line-height:1.5;color:var(--muted);margin:0 0 1rem;}
.ra-cell-hint{display:block;font-size:.75rem;line-height:1.35;color:var(--muted);margin-top:5px;}
.ra-cell-hint strong{color:var(--deep-2);font-weight:600;}

/* Panels: intro, closed, received and every form section share one look */
.ra-intro,.ra-closed,.ra-received,.ra-section{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);
}
.ra-intro,.ra-closed,.ra-received{padding:24px 28px;margin-bottom:28px;}
.ra-intro h2,.ra-closed h2,.ra-received h2{font-size:var(--fs-h3);margin:0 0 .6em;color:var(--deep-2);}
.ra-intro p{margin:0 0 .6em;}
.ra-intro ul{list-style:disc;margin:.2em 0 0 1.25em;padding:0;}
.ra-intro li{margin:.25em 0;padding-left:.2em;}
.ra-closed p,.ra-received p{margin:0 0 .8em;}
.ra-reference{font-family:'Montserrat',sans-serif;font-size:1.6rem;font-weight:700;letter-spacing:.06em;color:var(--deep);margin:.2em 0 .8em;word-break:break-all;}

/* Error summary */
.ra-errors{border:1px solid #e6b0aa;border-left:5px solid #c0392b;border-radius:var(--r-md);background:#fdf3f2;padding:18px 22px;margin-bottom:28px;}
.ra-errors h2{font-size:1.05rem;color:#a93226;margin:0 0 .5em;}
.ra-errors ul{list-style:disc;margin:0 0 .7em 1.25em;padding:0;color:#a93226;font-size:.9375rem;}
.ra-errors li{margin:.15em 0;}
.ra-errors p{margin:0;font-size:.9375rem;}
.ra-errors:focus{outline:3px solid rgba(192,57,43,.25);outline-offset:2px;}
/* The same box, in blue, for returning from the review page: nothing is wrong. */
.ra-editing{border-color:var(--line);border-left-color:var(--primary);background:var(--mist);}

/* Form sections. The legend is floated so it sits inside the card as its
   heading, rather than across the border as a fieldset legend does. */
.ra-section{padding:24px 28px 28px;margin:0 0 28px;min-width:0;}
.ra-section > legend{
  float:left;width:100%;padding:0 0 14px;margin:0 0 22px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:var(--fs-h3);color:var(--deep-2);
}
.ra-section > legend + *{clear:both;}
.ra-step{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;font-size:.9375rem;}
.ra-section h3{font-size:1rem;margin:0 0 .6rem;color:var(--deep-2);}
.ra-section .form-grid{gap:20px 24px;}
.ra-section .form-grid > div{min-width:0;}
.ra-section textarea{min-height:96px;}

/* Yes / no questions: two pill choices with the radio kept visible */
.ra-yesno{border:0;padding:0;margin:0 0 18px;min-width:0;}
.ra-yesno legend{font-weight:600;font-size:.9375rem;color:var(--deep-2);margin:0 0 .6em;padding:0;}
.ra-choices{display:flex;gap:10px;flex-wrap:wrap;}
.ra-choice{
  display:inline-flex;align-items:center;gap:.55em;min-width:96px;padding:.55em 1.1em;margin:0;
  border:1px solid var(--line-strong);border-radius:999px;background:#fff;
  font-weight:500;font-size:.9375rem;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s;
}
.ra-choice:hover{border-color:var(--primary-300);}
.ra-choice:has(input:checked){border-color:var(--primary);background:var(--mist);color:var(--deep-2);font-weight:600;}
.ra-choice input,.ra-check input{width:auto;margin:0;accent-color:var(--primary);}
.ra-question + .ra-question{border-top:1px solid var(--line);padding-top:18px;}
.ra-conditional{border-left:3px solid var(--primary-300);padding:4px 0 4px 18px;margin:0 0 18px;}
.ra-conditional[hidden]{display:none;}

/* Computed values: age and the table's percentages and grand total */
.ra-computed{display:flex;align-items:center;min-height:2.95em;padding:.7em .9em;background:var(--mist);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--deep-2);font-weight:600;}
.ra-table output{display:block;text-align:center;font-weight:700;color:var(--deep);font-variant-numeric:tabular-nums;}

/* Uploads: label, then the allowed type and size, then the input */
.ra-file label{margin-bottom:.2em;}
.ra-file-meta{display:block;font-size:.8125rem;color:var(--muted);margin-bottom:.5em;}
.ra-file .ra-hint{margin:-.2em 0 .5em;}
/* A file kept from an attempt that was sent back with errors */
.ra-kept{margin:0 0 .5em;font-size:.8125rem;line-height:1.4;color:#1e6b43;overflow-wrap:anywhere;}
.ra-kept strong{font-weight:600;}
.ra-cell-hint.ra-kept{margin:0 0 5px;color:#1e6b43;}
.ra-cell-hint.ra-kept strong{color:inherit;}
.ra-form input[type="file"]{padding:.45em;background:var(--mist);border-style:dashed;font-size:.875rem;cursor:pointer;}
.ra-form input[type="file"]::file-selector-button{
  margin-right:.8em;padding:.45em .9em;border:1px solid var(--primary);border-radius:var(--r-sm);
  background:#fff;color:var(--primary);font:600 .8125rem/1.2 'Inter',sans-serif;cursor:pointer;
}
.ra-form input[type="file"]:hover::file-selector-button{background:var(--primary);color:#fff;}

/* Photo */
.ra-photo{display:flex;gap:22px;align-items:flex-start;}
.ra-photo .ra-file{flex:1;min-width:0;}
.ra-photo-frame{flex:0 0 116px;height:116px;border:1px dashed var(--line-strong);border-radius:var(--r-sm);background:var(--mist);display:flex;align-items:center;justify-content:center;text-align:center;font-size:.8125rem;color:var(--muted);overflow:hidden;position:relative;}
.ra-photo-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* The proforma's tables. Fixed layout with set widths, so every column
   keeps room for what goes in it; Board / University and Details take the
   rest. */
.ra-table-wrap{overflow-x:auto;margin-bottom:14px;}
.ra-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:.9375rem;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;}
.ra-table th,.ra-table td{padding:10px;vertical-align:middle;text-align:left;border-bottom:1px solid var(--line);}
.ra-table tbody tr:last-child > *{border-bottom:0;}
.ra-table thead th{background:var(--deep);color:#fff;font-weight:600;font-size:.8125rem;letter-spacing:.01em;text-align:left;}
.ra-table tbody th{background:var(--mist);color:var(--deep-2);font-size:.875rem;font-weight:700;line-height:1.3;}
.ra-table input{padding:.55em .65em;font-size:.9375rem;}
.ra-table input[type="file"]{font-size:.75rem;padding:.3em;}
.ra-table input[type="file"]::file-selector-button{padding:.4em .7em;font-size:.75rem;margin-right:.5em;}
.ra-academic thead th:nth-child(n+3):nth-child(-n+6){text-align:center;}
.ra-total-row th,.ra-total-row td{background:var(--sand-2) !important;}
.ra-total-row output[data-grand="board"]{text-align:left;font-weight:600;font-size:.875rem;}
.ra-col-degree{width:180px;}
.ra-col-year{width:96px;}
.ra-col-marks{width:112px;}
.ra-col-percent{width:78px;}
.ra-col-file{width:222px;}
.ra-col-post{width:160px;}
.ra-col-date{width:168px;}
.ra-col-scale{width:104px;}
.ra-col-action{width:108px;}
.ra-awards .ra-col-year{width:130px;}

/* Add and remove row buttons: compact, clearly buttons, not primary */
.ra-table .ra-row-action{text-align:right;}
.ra-add,.ra-remove{
  display:inline-flex;align-items:center;gap:.4em;padding:.45em .9em;border-radius:var(--r-sm);
  font:600 .8125rem/1.2 'Inter',sans-serif;cursor:pointer;background:#fff;transition:background .15s,border-color .15s,color .15s;
}
.ra-add{border:1px solid var(--primary);color:var(--primary);}
.ra-add span{font-size:1.1em;line-height:1;}
.ra-add:hover{background:var(--primary);color:#fff;}
.ra-add[disabled]{opacity:.5;cursor:not-allowed;background:#fff;color:var(--primary);}
.ra-remove{border:1px solid #e6b0aa;color:#a93226;}
.ra-remove span{font-size:1.15em;line-height:1;}
.ra-remove:hover{background:#fdf3f2;border-color:#c0392b;}
.ra-repeat + .ra-repeat{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);}

/* A field with an error: red border beside the red message under it. In
   the academic table the message goes on its own line under the row (see
   .ra-row-errors) and the field is marked with .ra-invalid instead. */
.ra-form :is(div,td):has(> .field-error) > :is(input,select,textarea),
.ra-form .ra-file:has(> .field-error) > input,
.ra-form .ra-invalid{border-color:#c0392b;background:#fffafa;}
.ra-form .ra-yesno:has(> .field-error) .ra-choice{border-color:#e6b0aa;}
.ra-table td .field-error{font-size:.8125rem !important;line-height:1.35;}
.ra-table tr:has(+ .ra-row-errors) > *{border-bottom:0;}
.ra-row-errors td{background:#fdf3f2 !important;padding:8px 12px 10px;}
.ra-row-errors .field-error{margin-top:2px !important;}

/* Declarations */
.ra-declaration{background:var(--mist);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 20px;font-size:.9375rem;line-height:1.6;}
.ra-declaration p{margin:0 0 .5em;}
.ra-declaration p:last-child{margin-bottom:0;}
.ra-declaration ol{margin:0 0 0 1.4em;padding:0;}
.ra-declaration ol ol{margin:.3em 0 .2em 1.6em;}
.ra-declaration li{margin:.3em 0;}
.ra-check{
  display:flex;align-items:flex-start;gap:.7em;margin:16px 0 4px;padding:12px 16px;
  border:1px solid var(--line-strong);border-radius:var(--r-md);background:#fff;
  font-weight:500;font-size:.9375rem;color:var(--ink);cursor:pointer;
}
.ra-check input{margin-top:.2em;width:18px;height:18px;flex:0 0 auto;}
.ra-check:has(input:checked){border-color:var(--primary);background:var(--mist);}
.ra-form .ra-check:has(+ .field-error){border-color:#c0392b;}
.ra-signature{margin-top:18px;}

/* Submit bar. Sticks to the bottom of the screen while the form is in
   view (on a phone it sits at the end of the form; see below). Right
   padding keeps the button clear of the floating WhatsApp, donate and
   appointment buttons wherever they could overlap it. */
.ra-submit{
  position:sticky;bottom:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin:0 -1px;padding:14px 22px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:0 -6px 18px rgba(16,46,72,.08);
}
.ra-submit-note{margin:0;font-size:.875rem;line-height:1.5;color:var(--muted);max-width:620px;}
.ra-submit-note strong{color:var(--deep-2);}
.ra-submit .btn{flex:0 0 auto;}
.ra-submit button[disabled]{opacity:.7;cursor:progress;}
@media (max-width:1240px){ .ra-submit{padding-right:84px;} }

/* Phones: one column, and each table row becomes a stacked card with
   its fields labelled from data-label. */
@media (max-width:760px){
  .ra-intro,.ra-closed,.ra-received{padding:20px 18px;}
  .ra-section{padding:20px 16px 22px;}
  .ra-section > legend{font-size:1.0625rem;gap:10px;}
  .ra-step{width:28px;height:28px;font-size:.875rem;}
  .ra-page .form-grid{grid-template-columns:1fr;}
  .ra-photo{flex-direction:column;align-items:stretch;gap:14px;}
  .ra-photo-frame{flex:none;align-self:flex-start;width:116px;height:116px;}

  .ra-table-wrap{overflow-x:visible;}
  .ra-table{border:0;border-radius:0;overflow:visible;table-layout:auto;}
  .ra-table colgroup,.ra-table thead{display:none;}
  .ra-table tbody{display:block;}
  .ra-table tr{
    display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;padding:14px;
    border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  }
  .ra-table th,.ra-table td{display:block;padding:0;border:0;background:none !important;min-width:0;}
  .ra-table tbody th{grid-column:1/-1;font-size:.9375rem;padding-bottom:8px;border-bottom:1px solid var(--line);}
  .ra-table td[data-label]::before{content:attr(data-label);display:block;font-weight:600;font-size:.8125rem;color:var(--deep-2);margin-bottom:4px;}
  .ra-table output{text-align:left;padding:.5em 0;}
  .ra-academic td[data-label="Board / University"],
  .ra-academic td[data-label="Certificate"],
  .ra-experience td[data-label="Post held"],
  .ra-experience td[data-label="Department / office"],
  .ra-awards td[data-label="Details"]{grid-column:1/-1;}
  .ra-awards tr{grid-template-columns:1fr;}
  .ra-table .ra-row-action{grid-column:1/-1;text-align:right;}
  .ra-total-row{background:var(--sand-2) !important;}
  .ra-table tr.ra-row-errors{display:block;margin:-8px 0 14px;padding:10px 14px;border-color:#e6b0aa;background:#fdf3f2;}
  .ra-row-errors td{padding:0;}
  .ra-table input[type="file"]{font-size:.8125rem;}

  /* Not sticky on a phone: with its note it would cover a third of the
     screen while scrolling. It sits at the end of the form instead, still
     clear of the floating buttons. */
  .ra-submit{position:static;flex-direction:column;align-items:stretch;gap:12px;padding:16px 84px 16px 16px;border-radius:var(--r-md);box-shadow:var(--shadow);}
  .ra-submit .btn{width:100%;}
}