/* Modern layout for public web forms (body.wf-modern, when the tenant has a layout file). Loaded only on that page. */

.wf-modern {
    --wf-bg: #f3f5f9;
    --wf-card: #ffffff;
    --wf-ink: #1d2433;
    --wf-muted: #667085;
    --wf-line: #e4e7ec;
    --wf-accent: #4f46e5;
    --wf-accent-soft: #eef2ff;
    --wf-done: #12b76a;
    --wf-radius: 14px;
    --wf-control-radius: 10px;
    --wf-accent-strong: color-mix(in srgb, var(--wf-accent) 82%, #000);
    --wf-font: inherit;
    color: var(--wf-ink);
    font-family: var(--wf-font);
}

/* The theme's own body background rules use !important; this one is stronger. */
html body.wf-modern,
html body.wf-modern #content {
    background: var(--wf-bg) !important;
}

/* theme_one applies body>#main>#content padding with !important; remove its top gutter
   so the modern web-form header starts at the top of the page. */
html body.wf-modern > #main > #content {
    padding-top: 0 !important;
}

/* The classic logo strip, widget header and top button bar give way to the hero card and the footer. */
.wf-modern #erp-logo,
.wf-modern #wid-id-0 > header,
.wf-modern #frmContainer #allFilters {
    display: none !important;
}

.wf-modern #content {
    max-width: 920px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

.wf-modern #widget-grid > .row,
.wf-modern #widget-grid article {
    margin: 0;
    padding: 0;
}

/* Hero */
.wf-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    margin-bottom: 16px;
    background: var(--wf-card);
    border: 1px solid var(--wf-line);
    border-radius: var(--wf-radius);
}

.wf-hero-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
}

.wf-hero-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.wf-hero-text {
    min-width: 0;
    flex: 1 1 auto;
}

.wf-hero-company {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--wf-muted);
}

.wf-hero-title {
    margin: 2px 0 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: capitalize;
    color: var(--wf-ink);
}

.wf-hero-intro {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--wf-muted);
}

/* Card */
.wf-modern #wid-id-0 {
    background: var(--wf-card);
    border: 1px solid var(--wf-line) !important;
    border-radius: var(--wf-radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    overflow: hidden;
}

.wf-modern #frmContainer {
    padding: 8px 24px 0;
    border: 0 !important;
}

/* Stepper */
.wf-stepper {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 16px 24px;
    list-style: none;
    border-bottom: 1px solid var(--wf-line);
    overflow-x: auto;
    scrollbar-width: none;
}

.wf-stepper-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: max-content;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wf-muted);
    white-space: nowrap;
}

.wf-stepper-num {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--wf-line);
    font-size: 12px;
}

.wf-stepper-item.wf-current {
    color: var(--wf-accent);
    background: var(--wf-accent-soft);
}

.wf-stepper-item.wf-current .wf-stepper-num {
    border-color: var(--wf-accent);
    background: var(--wf-accent);
    color: #fff;
}

.wf-stepper-item.wf-done {
    color: var(--wf-ink);
    cursor: pointer;
}

.wf-stepper-item.wf-done .wf-stepper-num {
    border-color: var(--wf-done);
    background: var(--wf-done);
    color: #fff;
}

/* Steps: only the current one shows. visibleIf keeps its own inline display on sections. */
.wf-modern .wf-step-hidden {
    display: none !important;
}

/* Sections */
.wf-modern #fieldsetParent > fieldset {
    padding: 16px 0 8px;
    column-gap: 24px;
    border-bottom: 1px dashed var(--wf-line);
}

.wf-modern #fieldsetParent > fieldset:last-of-type {
    border-bottom: 0;
}

.wf-modern #fieldsetParent > fieldset > legend.formSubTitle {
    margin: 0 0 8px;
    padding: 0 !important;
    border: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--wf-ink);
    text-transform: none;
}

.wf-modern #fieldsetParent > fieldset > legend.formSubTitle > i {
    display: none;
}

.wf-modern #fieldsetParent > fieldset > legend.formSubTitle b {
    font-weight: 700;
    text-transform: capitalize;
}

/* Fields: label above the input */
.wf-modern #fieldsetParent .form-group {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-bottom: 12px;
    padding-inline: 0;
}

.wf-modern #fieldsetParent .form-group .control-label {
    width: auto;
    padding: 0;
    text-align: start;
    font-size: 13px;
    font-weight: 600;
    color: #344054;
}

/* Blocks filled by the form's custom JS */
.wf-block {
    padding: 16px 0;
}

.wf-block:empty {
    display: none;
}

.wf-block-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
}

.wf-block-empty {
    color: var(--wf-muted);
}

.wf-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--wf-line);
    border-radius: 10px;
}

.wf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.wf-table th {
    padding: 10px 12px;
    background: #f9fafb;
    font-weight: 600;
    color: var(--wf-muted);
    text-align: start;
    white-space: nowrap;
}

.wf-table td {
    padding: 10px 12px;
    border-top: 1px solid var(--wf-line);
}

.wf-table .wf-num {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.wf-totals {
    display: grid;
    gap: 6px;
    width: min(100%, 340px);
    margin: 16px 0 0 auto;
    padding: 14px 16px;
    background: #f9fafb;
    border-radius: 10px;
}

[dir="rtl"] .wf-totals,
.smart-rtl .wf-totals {
    margin: 16px auto 0 0;
}

.wf-total {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
}

.wf-total dt { font-weight: 500; color: var(--wf-muted); }
.wf-total dd { margin: 0; font-variant-numeric: tabular-nums; }

.wf-total-strong {
    padding-top: 8px;
    border-top: 1px solid var(--wf-line);
    font-size: 16px;
}

.wf-total-strong dt,
.wf-total-strong dd {
    font-weight: 700;
    color: var(--wf-ink);
}

/* Footer buttons */
.wf-modern #frm .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 14px 24px !important;
    background: var(--wf-card);
    border-top: 1px solid var(--wf-line);
}

.wf-btn {
    height: 38px;
    padding: 0 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid var(--wf-line);
    background: var(--wf-card);
    color: var(--wf-ink);
}

.wf-btn-next {
    border-color: var(--wf-accent);
    background: var(--wf-accent);
    color: #fff;
}

.wf-btn-back { margin-inline-end: auto; }

.wf-modern.wf-on-first-step .wf-btn-back,
.wf-modern.wf-on-last-step .wf-btn-next,
.wf-modern.wf-mode-steps:not(.wf-on-last-step) #FormAdd {
    display: none !important;
}

.wf-modern #FormAdd {
    height: 38px;
    padding: 0 22px;
    border-radius: 8px;
}

/* Phone */
@media (max-width: 640px) {
    .wf-modern .wf-hero + #countdown {
        display: block;
        width: fit-content;
        max-width: 100%;
        margin: 6px auto 10px;
    }

    .wf-modern #content { padding: 12px 10px 32px; }
    .wf-hero { padding: 14px 16px; gap: 12px; }
    .wf-hero-logo { width: 44px; height: 44px; }
    .wf-hero-brand { gap: 7px; }
    .wf-hero-title { font-size: 18px; }
    .wf-stepper { padding: 12px 16px; }
    .wf-stepper-item:not(.wf-current) .wf-stepper-label { display: none; }
    .wf-stepper-item { flex: 0 0 auto; }
    .wf-modern #frmContainer { padding: 4px 16px 0; }
    .wf-modern #frm .form-actions { padding: 12px 16px !important; }

    .wf-modern #fieldsetParent > fieldset:is(.isThreeColumn, .isTwoColumn) {
        grid-template-columns: 1fr !important;
    }

    .wf-modern #fieldsetParent > fieldset > :is(.formSubTitle, .formGridElmt) {
        grid-column: 1 / 2 !important;
    }

    .wf-table thead { display: none; }
    .wf-table tr { display: block; padding: 8px 0; border-top: 1px solid var(--wf-line); }
    .wf-table tr:first-child { border-top: 0; }
    .wf-table td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 12px; border: 0; }
    .wf-table td::before { content: attr(data-label); color: var(--wf-muted); font-weight: 600; }
    .wf-totals { width: 100%; }
}

/* Session countdown some web form scripts add to <body> (e.g. Online Fee Calculator). */
.wf-modern #countdown {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 20;
    color: #fff !important;
    font-size: 13px !important;
}

/* Script dialogs ($.SmartMessageBox: showAlert, the fee calculator's card type confirmation). Look only: the button
   text stays, scripts compare it (ButtonPressed === "Ok"). The classic web form page does not load dark-mode.css, so
   --btn-bg is undefined and common.css's light-dark() background resolves to transparent; set it here. */
.wf-modern .divMessageBox {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: rgba(16, 24, 40, .55) !important;
    backdrop-filter: blur(2px);
}

.wf-modern .divMessageBox .MessageBoxContainer {
    position: relative;
    top: auto !important;
    transform: none !important;
    width: min(100%, 460px);
    max-height: calc(100vh - 24px);
    margin: 0 auto;
    padding: 0;
    overflow: auto;
    background-color: var(--wf-card);
    color: var(--wf-ink);
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(16, 24, 40, .22);
    text-align: center;
}

.wf-modern .divMessageBox .MessageBoxContainer::before {
    width: 48px;
    height: 48px;
    margin: 24px auto 0;
    border-radius: 50%;
    background-color: var(--wf-accent-soft);
    color: var(--wf-accent);
    font-size: 28px;
    line-height: 48px;
}

.wf-modern .divMessageBox .MessageBoxMiddle {
    position: static;
    width: auto;
    left: auto;
    padding: 12px 24px 0;
}

.wf-modern .divMessageBox .MsgTitle {
    display: block;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--wf-ink);
}

.wf-modern .divMessageBox .pText {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--wf-muted);
}

.wf-modern .divMessageBox .MessageBoxMiddle > br {
    display: none;
}

/* Summary the fee calculator puts in the dialog (#charges_div): a list, not a bordered table. */
.wf-modern .divMessageBox #charges_div {
    margin-top: 16px;
    padding: 4px 16px;
    background: #f9fafb;
    border: 1px solid var(--wf-line);
    border-radius: 12px;
    text-align: start;
}

.wf-modern .divMessageBox #charges_div table {
    display: table !important;
    width: 100%;
    margin: 0;
}

.wf-modern .divMessageBox #charges_div th,
.wf-modern .divMessageBox #charges_div td {
    padding: 10px 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--wf-line) !important;
    background: none !important;
    font-size: 14px;
    vertical-align: middle;
}

.wf-modern .divMessageBox #charges_div tr:first-child th,
.wf-modern .divMessageBox #charges_div tr:first-child td {
    border-top: 0 !important;
}

.wf-modern .divMessageBox #charges_div th {
    width: 40%;
    font-weight: 500;
    color: var(--wf-muted);
    text-align: start !important;
    white-space: nowrap;
}

.wf-modern .divMessageBox #charges_div td {
    text-align: end !important;
    font-variant-numeric: tabular-nums;
}

.wf-modern .divMessageBox #charges_div tr:last-child th,
.wf-modern .divMessageBox #charges_div tr:last-child td {
    font-size: 17px;
    font-weight: 700;
    color: var(--wf-ink);
}

/* Card type: the jqx radio buttons as choice chips. */
.wf-modern .divMessageBox #cardTypeContainer {
    display: inline-flex !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 !important;
}

.wf-modern .divMessageBox #cardTypeContainer > [role="radio"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto !important;
    height: 36px !important;
    padding: 0 12px 0 8px;
    border: 1.5px solid var(--wf-line);
    border-radius: 999px;
    background: var(--wf-card);
    font-size: 13px;
    font-weight: 600;
    line-height: 1 !important;
}

.wf-modern .divMessageBox #cardTypeContainer > [role="radio"][aria-checked="true"] {
    border-color: var(--wf-accent);
    background: var(--wf-accent-soft);
    color: var(--wf-accent);
}

.wf-modern .divMessageBox #cardTypeContainer > [role="radio"] > div:first-child {
    margin-top: 0 !important;
    border: 1.5px solid #98a2b3;
    border-radius: 50%;
    background: var(--wf-card) !important;
}

.wf-modern .divMessageBox #cardTypeContainer > [role="radio"] > div:first-child * {
    background: transparent !important;
    border: 0 !important;
}

/* The jqx tick does not draw on this page; a filled dot shows the selected card type. */
.wf-modern .divMessageBox #cardTypeContainer > [role="radio"][aria-checked="true"] > div:first-child {
    border-color: var(--wf-accent);
    box-shadow: inset 0 0 0 4px var(--wf-card);
    background: var(--wf-accent) !important;
}

/* The school's note under the summary (schConfig online_payment_note_message). */
.wf-modern .divMessageBox .MessageBoxMiddle > p.fw-600 {
    margin: 12px 0 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--wf-muted);
    text-align: start;
}

.wf-modern .divMessageBox .MessageBoxMiddle > p.fw-600:empty {
    display: none;
}

.wf-modern .divMessageBox .MessageBoxButtonSection {
    position: static;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    width: auto;
    margin: 20px -24px 0;
    padding: 16px 24px;
    border-top: 1px solid var(--wf-line);
    background: var(--wf-card);
}

.wf-modern .divMessageBox .MessageBoxButtonSection button {
    flex: 0 0 auto;
    min-width: 104px;
    height: 40px;
    margin: 0 !important;
    padding: 0 18px;
    border: 1px solid var(--wf-line) !important;
    border-radius: 10px !important;
    background: var(--wf-card) !important;
    color: var(--wf-ink) !important;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    box-shadow: none !important;
}

.wf-modern .divMessageBox .MessageBoxButtonSection button:last-child {
    border-color: var(--wf-accent) !important;
    background: var(--wf-accent) !important;
    color: #fff !important;
}

@media (max-width: 640px) {
    .wf-modern .divMessageBox {
        align-items: flex-end;
        padding: 0;
    }

    .wf-modern .divMessageBox .MessageBoxContainer {
        width: 100%;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
    }

    .wf-modern .divMessageBox .MessageBoxButtonSection button {
        flex: 1 1 0;
    }
}

/* Buttons inside the form (SimpleButton: input.formFieldButton, e.g. Calculate Fee Dues, Make Online Fee Payment). */
.wf-modern #fieldsetParent .form-group .control-label:empty {
    display: none;
}

.wf-modern #fieldsetParent .formFieldButton,
.wf-modern .wf-moved .formFieldButton {
    width: 100% !important;
    height: 44px !important;
    padding: 0 20px;
    border: 1px solid var(--wf-accent) !important;
    border-radius: var(--wf-control-radius) !important;
    background: var(--wf-accent) !important;
    color: #fff !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), inset 0 -2px 0 rgba(0, 0, 0, .08);
    transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
    cursor: pointer;
}

.wf-modern #fieldsetParent .formFieldButton:hover,
.wf-modern .wf-moved .formFieldButton:hover {
    background: var(--wf-accent-strong) !important;
    border-color: var(--wf-accent-strong) !important;
}

.wf-modern #fieldsetParent .formFieldButton:active,
.wf-modern .wf-moved .formFieldButton:active {
    transform: translateY(1px);
}

.wf-modern #fieldsetParent .formFieldButton:focus-visible,
.wf-modern .wf-moved .formFieldButton:focus-visible,
.wf-btn:focus-visible {
    outline: 3px solid var(--wf-accent-soft);
    outline-offset: 2px;
}

.wf-modern #fieldsetParent .formFieldButton[aria-disabled="true"],
.wf-modern #fieldsetParent .formFieldButton:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* A button moved to another step is the step's main action: full width, a little taller. */
.wf-moved {
    padding-top: 8px;
}

.wf-moved .formFieldButton {
    height: 48px !important;
    font-size: 15px;
}

/* Footer: Clear is quiet, Add (submit) matches Next. */
.wf-modern #frm .form-actions #FormClear {
    height: 38px;
    padding: 0 14px;
    border: 0 !important;
    background: transparent !important;
    color: var(--wf-muted) !important;
    font-weight: 600;
    box-shadow: none !important;
}

.wf-modern #frm .form-actions #FormAdd {
    border: 1px solid var(--wf-accent) !important;
    background: var(--wf-accent) !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: var(--wf-control-radius) !important;
}

.wf-modern .wf-btn { border-radius: var(--wf-control-radius); }
.wf-modern .wf-btn-next:hover,
.wf-modern #frm .form-actions #FormAdd:hover { background: var(--wf-accent-strong) !important; }

/* Compact density (theme.density = "compact"). */
.wf-density-compact #fieldsetParent .form-group { margin-bottom: 6px; }
.wf-density-compact #fieldsetParent > fieldset { padding: 10px 0 4px; }
.wf-density-compact .wf-hero { padding: 14px 18px; }
.wf-density-compact #fieldsetParent .formFieldButton { height: 38px !important; }

/* theme.font: headings and navigation; field labels and inputs keep the system font for legibility. */
.wf-modern .wf-hero-title,
.wf-modern .wf-hero-company,
.wf-modern #fieldsetParent > fieldset > legend,
.wf-modern .wf-stepper,
.wf-modern .wf-block-title,
.wf-modern .wf-totals,
.wf-modern .divMessageBox .MsgTitle {
    font-family: var(--wf-font);
}

/* The countdown element exists before its timer starts. */
.wf-modern #countdown:empty {
    display: none;
}

/* Bootstrap modals scripts add (fee calculator "Session Timeout" #customAlertModal, IISJ recruitment
   "Registration Successfull" #smartModalconfirmation). Look only: ids, buttons and their handlers stay. */
.wf-modern .modal-backdrop.in {
    background: #101828;
    opacity: .55;
}

.wf-modern .modal-dialog {
    width: auto;
    max-width: 460px;
    margin: 15vh auto 24px;
    padding: 0 12px;
}

.wf-modern .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: var(--wf-radius);
    background: var(--wf-card);
    color: var(--wf-ink);
    box-shadow: 0 24px 48px rgba(16, 24, 40, .22);
}

.wf-modern .modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 4px 24px !important;
    border-bottom: 0;
}

.wf-modern .modal-header .modal-title {
    flex: 1 1 auto;
    order: 0;
    margin: 0;
    font-family: var(--wf-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: none;
    color: var(--wf-ink);
}

.wf-modern .modal-header .close {
    order: 1;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    font-size: 22px;
    line-height: 32px;
    color: var(--wf-muted);
    opacity: 1;
    text-shadow: none;
}

.wf-modern .modal-header .close:hover {
    background: var(--wf-accent-soft);
    color: var(--wf-ink);
}

.wf-modern .modal-body {
    padding: 8px 24px 20px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.5;
    color: var(--wf-muted);
}

.wf-modern .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px !important;
    border-top: 1px solid var(--wf-line);
}

.wf-modern .modal-footer .btn {
    min-width: 104px;
    height: 40px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid var(--wf-line);
    border-radius: var(--wf-control-radius);
    background: var(--wf-card);
    color: var(--wf-ink);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    box-shadow: none;
}

.wf-modern .modal-footer .btn:last-child {
    border-color: var(--wf-accent);
    background: var(--wf-accent);
    color: #fff;
}

.wf-modern .modal-footer .btn:last-child:hover {
    background: var(--wf-accent-strong);
}

@media (max-width: 640px) {
    .wf-modern .modal-dialog { margin-top: 20vh; }
    .wf-modern .modal-footer .btn { flex: 1 1 0; }
}