/* ============================================================
   School Free Trial form styles
   Component: com_rep | View: schooltrial
   ============================================================ */

:root {
    --stf-green:        #16a34a;
    --stf-green-dark:   #15803d;
    --stf-green-light:  #f0fdf4;
    --stf-green-border: #bbf7d0;
    --stf-dark:         #0f172a;
    --stf-red:          #dc2626;
    --stf-card-border:  #e2e8f0;
    --stf-input-border: #cbd5e1;
    --stf-text:         #1e293b;
    --stf-muted:        #64748b;
    --stf-faint:        #94a3b8;
}

/* ---- Page wrapper ---- */
.stf-wrap {
    background: #f1f5f9;
    padding: 28px 0 56px;
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
}
.stf {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--stf-text);
    font-size: 15px;
    line-height: 1.55;
}

/* ---- Hero ---- */
.stf-hero { text-align: center; padding: 4px 0 22px; }
.stf h1 {
    font-size: 30px;
    font-weight: 800;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
    color: var(--stf-dark);
    line-height: 1.2;
}
.stf-intro { font-size: 15px; color: var(--stf-muted); margin: 0; line-height: 1.7; }
.stf-intro strong { color: var(--stf-dark); font-weight: 700; }

/* ---- Flash messages (from controller) ---- */
.stf-flash { padding: 12px 16px; margin-bottom: 18px; border-radius: 8px; font-size: 14px; }
.stf-flash-error   { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.stf-flash-success { background: #f0fdf4; border: 1px solid var(--stf-green-border); color: #15803d; }
.stf-flash-notice  { background: #fefce8; border: 1px solid #fde68a; color: #78350f; }

/* ---- Notice bar (legal/consent) ---- */
.stf-notice {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #2563eb;
    border-radius: 0 10px 10px 0;
    padding: 12px 16px;
    margin-bottom: 22px;
    font-size: 13px;
    color: #1e40af;
    line-height: 1.65;
}

/* ---- Section cards ---- */
.stf-card {
    background: #fff;
    border: 1px solid var(--stf-card-border);
    border-radius: 12px;
    padding: 26px 28px 22px;
    margin-bottom: 16px;
    box-shadow: 0 1px 8px rgba(15, 23, 42, 0.05);
}

/* ---- Card header ---- */
.stf-card-head { margin-bottom: 20px; }
.stf-card-head h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--stf-dark);
    margin: 0 0 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.3;
}
.stf-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    background: var(--stf-green-light);
    color: var(--stf-green);
    flex-shrink: 0;
}
.stf-card-head p { margin: 0; font-size: 13px; color: var(--stf-muted); }

/* ---- Required / optional markers ---- */
.stf-req { color: var(--stf-red); font-weight: 600; }
.stf-opt { font-weight: 400; color: var(--stf-faint); font-size: 12px; }

/* ---- 2-column input grid ---- */
.stf-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.stf-row:last-of-type { margin-bottom: 0; }
.stf-col { flex: 1; min-width: 200px; }
.stf-col label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}
.stf-lbl-icon { display: inline-flex; align-items: center; flex-shrink: 0; }
.stf-col input[type="text"],
.stf-col input[type="email"],
.stf-col input[type="tel"] {
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 13px;
    font-size: 14px;
    border: 1px solid var(--stf-input-border);
    border-radius: 8px;
    box-sizing: border-box;
    color: var(--stf-dark);
    background: #fff;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.stf-col input[type="text"]::placeholder,
.stf-col input[type="email"]::placeholder,
.stf-col input[type="tel"]::placeholder { color: var(--stf-faint); }
.stf-col input:hover:not(:disabled)  { border-color: #94a3b8; }
.stf-col input:focus  { border-color: var(--stf-green); outline: none; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14); }
.stf-col input.stf-invalid { border-color: var(--stf-red); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); }

/* ---- Error messages ---- */
.stf-err { display: none; color: var(--stf-red); font-size: 12px; margin-top: 4px; line-height: 1.4; }
.stf-err.on { display: block; }
.stf-err-group { margin-top: 10px; }

/* ---- Course rows ---- */
.stf-course-rows { display: flex; flex-direction: column; gap: 12px; }
.stf-course-row {
    border: 1px solid var(--stf-card-border);
    border-radius: 10px;
    padding: 14px 16px 16px;
    background: #fafbfc;
}
.stf-cr-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.stf-cr-num-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--stf-green);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.stf-cr-header-title { font-size: 13px; font-weight: 700; color: #334155; flex: 1; }
.stf-cr-remove-btn {
    font-size: 12px;
    color: var(--stf-muted);
    background: none;
    border: 1px solid var(--stf-card-border);
    border-radius: 6px;
    padding: 3px 10px;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    line-height: 1.5;
}
.stf-cr-remove-btn:hover:not(:disabled) { color: var(--stf-red); border-color: #fecaca; background: #fef2f2; }
.stf-cr-remove-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.stf-cr-remove-btn::-moz-focus-inner { border: 0; padding: 0; }

/* Course row 3-column grid: Level | Subject & Exam Board | Students */
.stf-cr-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr 0.65fr;
    gap: 10px;
    align-items: end;
}
.stf-cr-col label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 5px;
}
.stf-cr-col select {
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 30px 0 11px;
    font-size: 13px;
    border: 1px solid var(--stf-input-border);
    border-radius: 8px;
    box-sizing: border-box;
    color: var(--stf-dark);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.41 0 6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E") no-repeat right 11px center;
    font-family: inherit;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.stf-cr-col select:focus { border-color: var(--stf-green); outline: none; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14); }
.stf-cr-col select:hover:not(:disabled) { border-color: #94a3b8; }
.stf-cr-col select:disabled { background-color: #f1f5f9; color: var(--stf-faint); cursor: not-allowed; }
.stf-cr-col select.stf-invalid { border-color: var(--stf-red); }

/* Students number input (3rd column of course row) */
.stf-cr-col-students input[type="number"] {
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 6px 0 10px;
    font-size: 13px;
    border: 1px solid var(--stf-input-border);
    border-radius: 8px;
    box-sizing: border-box;
    color: var(--stf-dark);
    background: #fff;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.stf-cr-col-students input[type="number"]:focus {
    border-color: var(--stf-green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14);
}
.stf-cr-col-students input[type="number"]:hover:not(:disabled) { border-color: #94a3b8; }
/* Keep native spin buttons visible for up/down control */
.stf-cr-col-students input[type="number"]::-webkit-inner-spin-button {
    opacity: 1;
    cursor: pointer;
}

/* ---- Searchable combo (Subject & Exam Board) ---- */
.stf-combo { position: relative; }
.stf-combo-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    height: 40px;
    padding: 0 11px;
    font-size: 13px;
    border: 1px solid var(--stf-input-border);
    border-radius: 8px;
    background: #fff;
    color: var(--stf-dark);
    font-family: inherit;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: none;
    text-align: left;
    -webkit-appearance: none;
}
.stf-combo-trigger:hover:not(:disabled) { border-color: #94a3b8; }
.stf-combo-trigger:focus { outline: none; border-color: var(--stf-green); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14); }
.stf-combo.open .stf-combo-trigger { border-color: var(--stf-green); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14); }
.stf-combo-trigger:disabled { background: #f1f5f9; color: var(--stf-faint); cursor: not-allowed; }
.stf-combo-trigger.stf-combo-placeholder .stf-combo-trigger-text { color: var(--stf-faint); }
.stf-combo-trigger.stf-invalid { border-color: var(--stf-red); }
.stf-combo-trigger-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stf-combo-chevron {
    display: inline-block;
    width: 12px;
    height: 8px;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.41 0 6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E") no-repeat center;
}
.stf-combo-native { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.stf-combo-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 200;
    background: #fff;
    border: 1px solid var(--stf-input-border);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}
.stf-combo-search-wrap { padding: 8px; border-bottom: 1px solid #f1f5f9; }
.stf-combo-search {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
    border: 1px solid var(--stf-input-border);
    border-radius: 6px;
    box-sizing: border-box;
    font-family: inherit;
    color: var(--stf-dark);
    background: #f8fafc;
    outline: none;
    transition: border-color 0.15s;
}
.stf-combo-search:focus { border-color: var(--stf-green); }
.stf-combo-list { max-height: 200px; overflow-y: auto; padding: 4px; }
.stf-combo-option {
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--stf-dark);
    transition: background 0.1s;
    line-height: 1.4;
}
.stf-combo-option:hover, .stf-combo-option.stf-combo-active { background: var(--stf-green-light); }
.stf-combo-option.stf-combo-selected { font-weight: 600; color: var(--stf-green); }
.stf-combo-option.stf-combo-selected.stf-combo-active { background: var(--stf-green-light); }
.stf-combo-empty { padding: 10px; font-size: 13px; color: var(--stf-muted); text-align: center; }

/* ---- Add row button ---- */
.stf-add-row-btn {
    width: 100%;
    padding: 13px;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    background: transparent;
    color: var(--stf-green);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
    box-sizing: border-box;
}
.stf-add-row-btn:hover { border-color: var(--stf-green); background: var(--stf-green-light); }
.stf-add-row-btn::-moz-focus-inner { border: 0; padding: 0; }

/* ---- Textarea (questions / notes) ---- */
.stf-field-block { margin-bottom: 0; }
.stf-field-label { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 7px; }
.stf-field-block textarea {
    display: block;
    width: 100%;
    min-height: 100px;
    margin: 0;
    padding: 11px 13px;
    font-size: 14px;
    line-height: 1.6;
    border: 1px solid var(--stf-input-border);
    border-radius: 8px;
    box-sizing: border-box;
    color: var(--stf-dark);
    background: #fff;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.stf-field-block textarea::placeholder { color: var(--stf-faint); }
.stf-field-block textarea:hover  { border-color: #94a3b8; }
.stf-field-block textarea:focus  { border-color: var(--stf-green); outline: none; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14); }

/* ---- T&C consent checkbox ---- */
.stf-consent {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    border: 1.5px solid var(--stf-green-border);
    border-radius: 10px;
    background: var(--stf-green-light);
    cursor: pointer;
    font-size: 13px;
    color: #334155;
    line-height: 1.55;
    margin: 0;
}
.stf-consent input { width: 17px; height: 17px; margin-top: 1px; flex-shrink: 0; accent-color: var(--stf-green); cursor: pointer; }
.stf-consent a { color: var(--stf-green-dark); font-weight: 600; text-decoration: underline; }
.stf-consent.stf-invalid { border-color: var(--stf-red); background: #fef2f2; }

/* ---- Submit area ---- */
.stf-submit-area { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.stf-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 40px;
    background: var(--stf-green);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
    min-width: 220px;
    letter-spacing: 0.01em;
}
.stf-submit-btn:hover:not(:disabled) { background: var(--stf-green-dark); }
.stf-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.stf-submit-btn::-moz-focus-inner { border: 0; padding: 0; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .stf-wrap { padding: 16px 0 40px; }
    .stf { padding: 0 12px; }
    .stf h1 { font-size: 24px; }
    .stf-card { padding: 18px 16px 16px; }
    .stf-cr-grid { grid-template-columns: 1fr; }
    .stf-cr-col-students input[type="number"] { text-align: left; }
    .stf-col { min-width: 100%; }
    .stf-submit-btn { width: 100%; }
}