/**
 * TDP Instructor Application wizard styles (items 15/16/17).
 * Brand tokens: deep #06272f, teal #087d72, green #18b47d, mint #e9fbf4,
 * gold #f3b82f, ink #092b36, line #dce9e7.
 *
 * Round 16: identity-verification styles removed; numbered repeatable
 * rows (No. column, per the client's Word-document tables) added.
 *
 * @package Teach_Demy_Plus
 * @since 2.4.0
 */

.tdp-ia-progress {
        display: flex;
        gap: 6px;
        list-style: none;
        margin: 26px 0 22px;
        padding: 0;
        flex-wrap: wrap;
}
.tdp-ia-progress li {
        flex: 1 1 130px;
        text-align: center;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .4px;
        text-transform: uppercase;
        color: #647783;
        padding: 10px 8px;
        border: 1px solid #dce9e7;
        border-radius: 30px;
        background: #fff;
        transition: all .2s ease;
}
.tdp-ia-progress li.current {
        background: #06272f;
        border-color: #06272f;
        color: #fff;
}
.tdp-ia-progress li.done {
        background: #e9fbf4;
        border-color: #18b47d;
        color: #08785f;
}

.tdp-ia-step { display: none; }
.tdp-ia-step.is-active { display: block; animation: tdpIaFade .25s ease; }
@keyframes tdpIaFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.tdp-ia-card {
        background: #fff;
        border: 1px solid #dce9e7;
        border-radius: 18px;
        padding: 26px;
        box-shadow: 0 8px 30px rgba(5, 38, 48, .045);
}
.tdp-ia-card h3 { margin: 0 0 6px; font-size: 16px; color: #092b36; }
.tdp-ia-card .tdp-ia-note { font-size: 11px; color: #647783; line-height: 1.7; margin: 0 0 16px; }

.tdp-ia-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tdp-ia-grid .tdp-ia-wide { grid-column: 1 / -1; }
@media (max-width: 700px) { .tdp-ia-grid { grid-template-columns: 1fr; } }

.tdp-ia-card label.field { display: flex; flex-direction: column; gap: 6px; font-size: 10px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; color: #354a55; }
.tdp-ia-card input[type="text"],
.tdp-ia-card input[type="email"],
.tdp-ia-card input[type="tel"],
.tdp-ia-card input[type="number"],
.tdp-ia-card select,
.tdp-ia-card textarea {
        width: 100%;
        border: 1px solid #dce9e7;
        border-radius: 10px;
        padding: 11px 12px;
        font-size: 13px;
        color: #092b36;
        background: #fff;
        outline: none;
        transition: border-color .15s ease, box-shadow .15s ease;
}
.tdp-ia-card input:focus,
.tdp-ia-card select:focus,
.tdp-ia-card textarea:focus { border-color: #087d72; box-shadow: 0 0 0 3px rgba(8, 125, 114, .12); }
.tdp-ia-card textarea { min-height: 110px; resize: vertical; line-height: 1.7; }

.tdp-ia-msg { display: none; margin-top: 12px; padding: 10px 14px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.tdp-ia-msg.ok { background: #e9fbf4; color: #08785f; border: 1px solid #b9ead7; }
.tdp-ia-msg.err { background: #fdecec; color: #c0392b; border: 1px solid #f3c5c1; }

/* Invalid-field highlight (per-step required validation) */
.tdp-ia-card input.tdp-ia-invalid,
.tdp-ia-card select.tdp-ia-invalid,
.tdp-ia-card textarea.tdp-ia-invalid,
.tdp-ia-radios input.tdp-ia-invalid {
        border-color: #c0392b !important;
        box-shadow: 0 0 0 3px rgba(192, 57, 43, .10);
}

/* Photo upload */
.tdp-ia-photo {
        height: 150px;
        border: 2px dashed #b9dad2;
        border-radius: 14px;
        background: #f7fbfa center/cover no-repeat;
        display: grid;
        place-items: center;
        cursor: pointer;
        transition: border-color .15s ease, background-color .15s ease;
        position: relative;
}
.tdp-ia-photo:hover { border-color: #087d72; }
.tdp-ia-photo.has-photo { border-style: solid; border-color: #18b47d; }
.tdp-ia-photo.is-uploading::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 12px;
        background: rgba(255, 255, 255, .65) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='11' fill='none' stroke='%23087d72' stroke-width='3' stroke-dasharray='52 20' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 14 14' to='360 14 14' dur='.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center no-repeat;
}
.tdp-ia-photo-hint { font-size: 11px; color: #647783; text-align: center; padding: 0 14px; }

/* Repeatable rows — numbered per the client's Word-document tables
   (No. / Degree / Field / University / Year and No. / Position / Company / Years). */
.tdp-ia-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.tdp-ia-row { display: grid; gap: 8px; align-items: center; }
.tdp-ia-row--edu { grid-template-columns: 34px 1fr 1fr 1fr 84px 34px; }
.tdp-ia-row--exp { grid-template-columns: 34px 1.2fr 1.2fr 110px 34px; }
.tdp-ia-row-no {
        display: grid; place-items: center;
        width: 34px; height: 34px;
        background: #06272f; color: #fff;
        border-radius: 10px;
        font-size: 12px; font-weight: 900;
}
.tdp-ia-row input { border: 1px solid #dce9e7; border-radius: 8px; padding: 9px 10px; font-size: 12px; }
.tdp-ia-row-remove {
        border: 0; background: #fdecec; color: #c0392b; border-radius: 8px;
        width: 34px; height: 34px; font-size: 16px; cursor: pointer; line-height: 1;
}
.tdp-ia-row-remove:hover { background: #f9d8d6; }
@media (max-width: 700px) {
        .tdp-ia-row--edu, .tdp-ia-row--exp { grid-template-columns: 34px 1fr 34px; }
        .tdp-ia-row input { grid-column: 2; }
        .tdp-ia-row-remove { grid-column: 3; grid-row: 1; }
}

/* Radio pills */
.tdp-ia-radios { display: flex; gap: 8px; flex-wrap: wrap; }
.tdp-ia-radios label {
        display: inline-flex; align-items: center; gap: 7px;
        border: 1px solid #dce9e7; border-radius: 30px; padding: 8px 14px;
        font-size: 12px; font-weight: 700; color: #354a55; cursor: pointer; background: #fff;
}
.tdp-ia-radios input { accent-color: #18b47d; }
.tdp-ia-radios label:has(input:checked) { border-color: #18b47d; background: #e9fbf4; color: #08785f; }

/* Buttons */
.tdp-ia-actions { display: flex; gap: 10px; justify-content: space-between; margin-top: 20px; flex-wrap: wrap; }
.tdp-ia-btn {
        border: 0; border-radius: 11px; padding: 12px 20px; font-size: 12px; font-weight: 900;
        cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: transform .15s ease, opacity .15s ease;
}
.tdp-ia-btn:hover { transform: translateY(-1px); }
.tdp-ia-btn-primary { background: linear-gradient(135deg, #18b47d, #2acb91); color: #fff; box-shadow: 0 10px 25px rgba(24, 180, 125, .2); }
.tdp-ia-btn-ghost { background: #fff; border: 1px solid #dce9e7; color: #092b36; }
.tdp-ia-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* Step 6 — success */
.tdp-ia-success { text-align: center; padding: 40px 20px; }
.tdp-ia-success .icon {
        width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px;
        background: #e9fbf4; color: #18b47d; display: grid; place-items: center; font-size: 30px; font-weight: 900;
}

/* Status panel (already-applied users) */
.tdp-inst-status-card {
        background: #fff; border: 1px solid #dce9e7; border-radius: 18px; padding: 24px 26px; margin-bottom: 22px;
}
.tdp-inst-status-badge {
        display: inline-block; padding: 7px 14px; border: 2px solid; border-radius: 30px;
        font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase;
}
.tdp-inst-status-meta { color: #354a55; font-size: 13px; margin: 12px 0 0; }
.tdp-inst-status-reason { color: #c0392b; font-size: 12px; margin: 6px 0 0; }
.tdp-inst-status-note { color: #647783; font-size: 12px; margin: 6px 0 0; }

/* Dark mode */
.dark-mode .tdp-ia-card, .woodmart-dark .tdp-ia-card { background: #10262b; border-color: #1e3f42; }
.dark-mode .tdp-ia-card h3, .woodmart-dark .tdp-ia-card h3 { color: #e6f2f0; }
.dark-mode .tdp-ia-card label.field, .woodmart-dark .tdp-ia-card label.field { color: #a7cfc9; }
.dark-mode .tdp-ia-card input, .dark-mode .tdp-ia-card select, .dark-mode .tdp-ia-card textarea,
.dark-mode .tdp-ia-row input, .woodmart-dark .tdp-ia-card input, .woodmart-dark .tdp-ia-card select,
.woodmart-dark .tdp-ia-card textarea, .woodmart-dark .tdp-ia-row input { background: #0b1e22; border-color: #1e3f42; color: #e6f2f0; }
.dark-mode .tdp-ia-progress li, .woodmart-dark .tdp-ia-progress li { background: #10262b; }
.dark-mode .tdp-ia-radios label, .woodmart-dark .tdp-ia-radios label { background: #10262b; color: #cfe5e2; }
.dark-mode .tdp-inst-status-card, .woodmart-dark .tdp-inst-status-card { background: #10262b; border-color: #1e3f42; }

/* =========================================================
   Round 17 — MOBILE PASS (phones)
   Companion to the theme's global td-mobile-fix.css. The 5-step
   wizard on a 360-412px phone: progress pills scroll horizontally
   (never wrap into a wall of pills), inputs are 16px (no iOS zoom),
   Next/Back become full-width thumb buttons, and the numbered
   education/experience rows keep their "No." badge column intact.
   ========================================================= */
@media (max-width:768px){
  .tdp-ia-progress{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
    margin:18px 0 16px;
  }
  .tdp-ia-progress li{
    flex:0 0 auto;
    min-width:104px;
    white-space:nowrap;
    padding:10px 14px;
  }
  .tdp-ia-card{padding:16px 14px;border-radius:14px}
  .tdp-ia-card h3{font-size:15px}
  .tdp-ia-card .tdp-ia-note{font-size:10.5px}
  .tdp-ia-card input[type="text"],
  .tdp-ia-card input[type="email"],
  .tdp-ia-card input[type="tel"],
  .tdp-ia-card input[type="number"],
  .tdp-ia-card input[type="url"],
  .tdp-ia-card input[type="password"],
  .tdp-ia-card select,
  .tdp-ia-card textarea{
    font-size:16px !important;   /* iOS zoom guard */
    min-height:44px;
  }
  .tdp-ia-row input{
    font-size:16px !important;
    min-height:42px;
  }
  .tdp-ia-actions{
    flex-direction:column-reverse;
    align-items:stretch;
    gap:8px;
  }
  .tdp-ia-actions .tdp-ia-btn{
    width:100%;
    justify-content:center;
    min-height:46px;
    padding:13px 18px;
    font-size:12.5px;
  }
  .tdp-ia-radios label{min-height:40px}
  .tdp-ia-row-remove{width:40px;height:40px}
  .tdp-ia-success{padding:30px 16px}
  .tdp-ia-success .icon{width:56px;height:56px;font-size:26px}
  .tdp-ia-msg{font-size:11.5px}
  .tdp-inst-status-card{padding:18px 16px;border-radius:14px}
}
@media (max-width:480px){
  .tdp-ia-card{padding:14px 12px}
  .tdp-ia-progress li{min-width:92px;font-size:9px;padding:9px 10px}
  .tdp-ia-photo{width:100%;height:auto;aspect-ratio:1}
}

/* =========================================================
   Round 18 — Edits (3)
   A) Country-flag chip row (injected by tdp-instructor-apply.js:
      the select is re-parented into .tdp-geo-country-wrap with the
      live flag chip at its side) — mirrors tdp-geo.css tokens.
   B) REVIEW section in Step 5 (summary of every wizard value, each
      block with an Edit jump-back button; regenerated on entry).
   ========================================================= */

/* --- A) Country select + flag chip row --- */
.tdp-geo-country-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-width: 0;
}
.tdp-geo-country-wrap select {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
}
.tdp-geo-country-wrap .tdp-geo-badge-wrap {
        flex: 0 0 auto;
}

/* --- B) Review section (Step 5) --- */
.tdp-ia-review {
        margin: 18px 0 6px;
        padding: 16px 18px;
        background: #f7fdfa;
        border: 1px solid #d6e5e0;
        border-left: 4px solid #16a673;
        border-radius: 12px;
}
.tdp-ia-review-title {
        margin: 0 0 4px;
        font-size: 16px;
        color: #062b2b;
}
.tdp-ia-review-note {
        margin: 0 0 12px;
        font-size: 11.5px;
        color: #647783;
}
.tdp-ia-review-block {
        padding: 10px 0 8px;
        border-bottom: 1px solid #e3efec;
}
.tdp-ia-review-block:last-child { border-bottom: none; }
.tdp-ia-review-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 6px;
}
.tdp-ia-review-head strong {
        font-size: 12.5px;
        color: #087d72;
        text-transform: uppercase;
        letter-spacing: 0.4px;
}
.tdp-ia-review-edit {
        padding: 6px 12px;
        font-size: 11px;
        border-radius: 8px;
}
.tdp-ia-review-line {
        margin: 3px 0;
        font-size: 12.5px;
        color: #092b36;
        line-height: 1.6;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
}

/* Dark mode */
.dark-mode .tdp-ia-review, .woodmart-dark .tdp-ia-review {
        background: #10262b;
        border-color: #1e3f42;
        border-left-color: #16a673;
}
.dark-mode .tdp-ia-review-title, .woodmart-dark .tdp-ia-review-title,
.dark-mode .tdp-ia-review-line, .woodmart-dark .tdp-ia-review-line {
        color: #e6f2f0;
}
.dark-mode .tdp-ia-review-block, .woodmart-dark .tdp-ia-review-block {
        border-bottom-color: #1e3f42;
}

/* Mobile (≤768px): the flag row + review blocks stack cleanly. */
@media (max-width:768px) {
        .tdp-geo-country-wrap { flex-wrap: wrap; }
        .tdp-geo-country-wrap .tdp-geo-badge-wrap { flex: 0 0 auto; }
        .tdp-ia-review { padding: 14px 12px; }
        .tdp-ia-review-head .tdp-ia-review-edit { min-height: 40px; }
}
