/*
 * Lagom 3 order-form skin
 * The rules are deliberately scoped to #frmConfigureProduct so other WHMCS
 * pages keep the original Lagom layout and behaviour.
 */

#frmConfigureProduct.lagom3-configure-product {
    --l3-primary: #60728f;
    --l3-primary-soft: #dfe8f6;
    --l3-primary-softer: #edf3ff;
    --l3-border: #dce2ea;
    --l3-text: #303846;
    --l3-muted: #7a8492;
    --l3-surface: #ffffff;
    --l3-page: #f5f7fa;
    color: var(--l3-text);
    background: var(--l3-surface);
    border: 1px solid #eef1f5;
    border-radius: 12px;
    box-shadow: 0 12px 35px rgba(36, 48, 66, .06);
    overflow: hidden;
}

#frmConfigureProduct .lagom3-page-heading {
    padding: 22px 28px 18px;
    background: #eef1f7;
    text-align: right;
}

#frmConfigureProduct .lagom3-page-heading h1 {
    margin: 0 0 7px;
    color: #3d4654;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.5;
}

#frmConfigureProduct .lagom3-page-heading p {
    margin: 0;
    color: #737d8b;
    font-size: 13px;
}

#frmConfigureProduct > .main-grid {
    display: block !important;
    width: 100%;
    padding: 20px 18px 6px;
}

#frmConfigureProduct .main-content {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}

#frmConfigureProduct .main-sidebar {
    display: none !important;
}

#frmConfigureProduct .main-content > .section,
#frmConfigureProduct .product-configurable-options > .section,
#frmConfigureProduct #productAddonsContainer > .section {
    margin: 0 0 26px;
}

#frmConfigureProduct .section-header {
    margin: 0 0 13px;
    padding: 0 4px;
    text-align: right;
}

#frmConfigureProduct .section-title,
#frmConfigureProduct .lagom3-custom-fields .control-label {
    display: block;
    margin: 0;
    color: #2f3744;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.65;
}

#frmConfigureProduct .section-desc,
#frmConfigureProduct .help-block {
    margin: 4px 0 0;
    color: var(--l3-muted);
    font-size: 12px;
}

#frmConfigureProduct .product-config-info {
    margin: 0;
    border: 0;
    border-radius: 7px;
    background: var(--l3-primary-softer);
    box-shadow: none;
}

#frmConfigureProduct .product-config-info .panel-body {
    padding: 14px 18px 15px;
}

#frmConfigureProduct .product-config-info h2 {
    margin: 0 0 10px;
    color: #43516a;
    font-size: 18px;
    font-weight: 800;
    text-align: right;
}

#frmConfigureProduct .product-config-info .product-info {
    color: #49566b;
    font-size: 13px;
    line-height: 1.9;
}

#frmConfigureProduct .panel-check-group.row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

#frmConfigureProduct .panel-check-group.row::before,
#frmConfigureProduct .panel-check-group.row::after {
    display: none;
}

#frmConfigureProduct .panel-check-group.row > [class*="col-"] {
    float: none !important;
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    padding: 0;
}

#frmConfigureProduct .panel.panel-check {
    height: 100%;
    min-height: 96px;
    margin: 0;
    border: 1px solid var(--l3-border);
    border-radius: 6px;
    background: var(--l3-surface);
    box-shadow: 0 1px 3px rgba(32, 45, 64, .035);
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#frmConfigureProduct .panel.panel-check:hover {
    border-color: #a9b8cf;
    box-shadow: 0 5px 16px rgba(64, 84, 116, .09);
    transform: translateY(-1px);
}

#frmConfigureProduct .panel.panel-check.checked {
    border-color: #aabbd5;
    background: var(--l3-primary-soft);
    box-shadow: inset 0 0 0 1px rgba(96, 114, 143, .08);
}

#frmConfigureProduct .panel-check .check,
#frmConfigureProduct .panel-check .check > label {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

#frmConfigureProduct .panel-check .check > label {
    position: relative;
    padding: 13px 15px;
}

#frmConfigureProduct .panel-check .check-content {
    padding: 0 23px 0 0;
    text-align: right;
}

#frmConfigureProduct .panel-check .check-title {
    margin: 0;
    color: #333d4c;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.7;
}

#frmConfigureProduct .panel-check .check-subtitle,
#frmConfigureProduct .panel-check .check-desc {
    margin: 5px 0 0;
    color: #5e6877;
    font-size: 12px;
    line-height: 1.65;
}

#frmConfigureProduct .panel-check input[type="radio"],
#frmConfigureProduct .panel-check input[type="checkbox"] {
    position: absolute;
    top: 16px;
    right: 14px;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--l3-primary);
}

#frmConfigureProduct .panel-check .radio-styled,
#frmConfigureProduct .panel-check .checkbox-styled {
    position: absolute !important;
    top: 14px;
    right: 13px;
    margin: 0 !important;
}

#frmConfigureProduct .panel-form {
    border-color: var(--l3-border);
    border-radius: 7px;
    box-shadow: none;
}

#frmConfigureProduct .panel-form .panel-body {
    padding: 16px;
}

#frmConfigureProduct select.form-control,
#frmConfigureProduct input.form-control,
#frmConfigureProduct textarea.form-control {
    min-height: 44px;
    border: 1px solid var(--l3-border);
    border-radius: 6px;
    box-shadow: none;
}

#frmConfigureProduct select.form-control:focus,
#frmConfigureProduct input.form-control:focus,
#frmConfigureProduct textarea.form-control:focus {
    outline: 0;
    border-color: #9bacc6;
    box-shadow: 0 0 0 3px rgba(96, 114, 143, .1);
}

#frmConfigureProduct .lagom-mt-server-section .panel {
    margin: 0;
    border: 1px solid #d9e3ef;
    background: #f8fbff;
}

#frmConfigureProduct .lagom-mt-server-section .panel-body {
    padding: 16px 18px;
}

#frmConfigureProduct .lagom-mt-login-notice {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 72px;
    padding: 13px 15px;
    border: 1px solid #cfe3d9;
    border-radius: 7px;
    color: #285943;
    background: #f0faf5;
}

#frmConfigureProduct .lagom-mt-login-notice strong,
#frmConfigureProduct .lagom-mt-login-notice span {
    display: block;
}

#frmConfigureProduct .lagom-mt-login-notice strong {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 800;
}

#frmConfigureProduct .lagom-mt-login-notice div > span {
    color: #60756a;
    font-size: 12px;
    line-height: 1.7;
}

#frmConfigureProduct .lagom-mt-login-icon {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    background: #3d8b65;
    font-size: 19px;
    line-height: 1;
}

#frmConfigureProduct .lagom-mt-password-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

#frmConfigureProduct .lagom-mt-password-grid .form-group {
    margin: 0;
}

#frmConfigureProduct .lagom-mt-password-grid label {
    display: block;
    margin-bottom: 8px;
    color: #344054;
    font-size: 13px;
    font-weight: 700;
}

#frmConfigureProduct .lagom-mt-password-wrap {
    position: relative;
}

#frmConfigureProduct .lagom-mt-password-input {
    min-height: 46px;
    padding-right: 12px;
    padding-left: 64px;
    direction: ltr;
    text-align: left;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

#frmConfigureProduct .lagom-mt-password-toggle {
    position: absolute;
    top: 50%;
    left: 8px;
    min-width: 48px;
    padding: 6px 8px;
    border: 0;
    border-radius: 5px;
    color: #4b607c;
    background: #e9eff7;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transform: translateY(-50%);
}

#frmConfigureProduct .lagom-mt-password-help,
#frmConfigureProduct .lagom-mt-password-error {
    margin: 9px 0 0;
    font-size: 12px;
    line-height: 1.8;
}

#frmConfigureProduct .lagom-mt-password-help {
    color: #667085;
}

#frmConfigureProduct .lagom-mt-password-error {
    padding: 8px 10px;
    border: 1px solid #f0c3c3;
    border-radius: 5px;
    color: #a33030;
    background: #fff5f5;
}

#frmConfigureProduct .lagom-mt-password-error[hidden] {
    display: none !important;
}

#frmConfigureProduct .lagom-mt-root-hidden,
#frmConfigureProduct .lagom-mt-custom-root-source {
    display: none !important;
}

#frmConfigureProduct .lagom-mt-bandwidth[hidden] {
    display: none !important;
}

#frmConfigureProduct .lagom-mt-bandwidth .panel-form {
    margin: 0;
    border: 1px solid #dce4ef;
    background: #f7f9fc;
}

#frmConfigureProduct .lagom-mt-bandwidth .panel-body {
    padding: 15px 16px;
}

#frmConfigureProduct .lagom-mt-bandwidth select.form-control {
    width: 100% !important;
    min-height: 48px;
    direction: ltr;
    text-align: left;
    background-color: #fff;
}

#frmConfigureProduct .lagom3-custom-fields > .section-body > .panel {
    border: 0;
    background: transparent;
}

#frmConfigureProduct .lagom3-custom-fields > .section-body > .panel > .panel-body {
    padding: 0;
}

#frmConfigureProduct .lagom3-custom-fields .row {
    margin-right: -6px;
    margin-left: -6px;
}

#frmConfigureProduct .lagom3-custom-fields [class*="col-"] {
    padding-right: 6px;
    padding-left: 6px;
}

#frmConfigureProduct .lagom3-root-password-field {
    float: none !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 25px;
}

#frmConfigureProduct .lagom3-root-password-field .form-group {
    margin: 0;
    padding: 16px 18px 18px;
    border: 1px solid var(--l3-border);
    border-radius: 7px;
    background: #f8fafc;
}

#frmConfigureProduct .lagom3-root-password-field .control-label {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
}

#frmConfigureProduct .lagom3-password-wrap {
    position: relative;
}

#frmConfigureProduct .lagom3-password-input {
    width: 100%;
    min-height: 46px;
    padding-right: 14px;
    padding-left: 50px;
    direction: ltr;
    text-align: left;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    letter-spacing: .04em;
}

#frmConfigureProduct .lagom3-password-toggle {
    position: absolute;
    top: 50%;
    left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    color: #667389;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
}

#frmConfigureProduct .lagom3-password-toggle:hover,
#frmConfigureProduct .lagom3-password-toggle:focus {
    color: #34455f;
    background: #e7edf5;
    outline: none;
}

#frmConfigureProduct .lagom3-password-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

#frmConfigureProduct .lagom3-os-field {
    float: none !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

#frmConfigureProduct .lagom3-os-field .form-group {
    margin-bottom: 0;
}

#frmConfigureProduct .lagom3-os-field .control-label {
    margin: 0 4px 13px;
}

#frmConfigureProduct .lagom3-os-source {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#frmConfigureProduct .lagom3-os-picker {
    width: 100%;
}

#frmConfigureProduct .lagom3-os-picker.is-single-option .lagom3-os-family-grid {
    grid-template-columns: minmax(0, 1fr);
}

#frmConfigureProduct .lagom3-os-picker.is-single-option .lagom3-os-card {
    min-height: 76px;
}

#frmConfigureProduct .lagom3-os-family-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

#frmConfigureProduct .lagom3-os-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 70px;
    padding: 12px 42px 12px 14px;
    border: 1px solid var(--l3-border);
    border-radius: 6px;
    color: #384252;
    background: #fff;
    text-align: right;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#frmConfigureProduct .lagom3-os-card:hover {
    border-color: #a9b8cf;
    box-shadow: 0 5px 16px rgba(64, 84, 116, .09);
    transform: translateY(-1px);
}

#frmConfigureProduct .lagom3-os-card.is-selected {
    border-color: #aabbd5;
    background: var(--l3-primary-soft);
}

#frmConfigureProduct .lagom3-os-radio {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 16px;
    height: 16px;
    border: 1.5px solid #b7c0cc;
    border-radius: 50%;
    background: #fff;
    transform: translateY(-50%);
}

#frmConfigureProduct .lagom3-os-card.is-selected .lagom3-os-radio {
    border: 5px solid var(--l3-primary);
}

#frmConfigureProduct .lagom3-os-icon {
    display: inline-flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 12px;
    padding: 6px;
    border-radius: 50%;
    color: #fff;
    background: #8390a3;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    overflow: hidden;
}

#frmConfigureProduct .lagom3-os-icon-image {
    display: block;
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

#frmConfigureProduct .lagom3-os-icon.has-fallback {
    padding: 0;
}

#frmConfigureProduct .lagom3-os-icon--none { background: #8996a9; }
#frmConfigureProduct .lagom3-os-icon--ubuntu { background: #e95420; }
#frmConfigureProduct .lagom3-os-icon--debian { background: #a81d33; }
#frmConfigureProduct .lagom3-os-icon--almalinux { background: #0f4266; }
#frmConfigureProduct .lagom3-os-icon--rocky { background: #10a579; }
#frmConfigureProduct .lagom3-os-icon--windows { border-radius: 7px; background: #0078d4; }
#frmConfigureProduct .lagom3-os-icon--mikrotik { background: #293239; }
#frmConfigureProduct .lagom3-os-icon--centos { background: #262577; }
#frmConfigureProduct .lagom3-os-icon--fedora { background: #51a2da; }
#frmConfigureProduct .lagom3-os-icon--freebsd { background: #ab2b28; }
#frmConfigureProduct .lagom3-os-icon--archlinux { background: #1793d1; }
#frmConfigureProduct .lagom3-os-icon--opensuse { background: #73ba25; }
#frmConfigureProduct .lagom3-os-icon--alpinelinux { background: #0d597f; }
#frmConfigureProduct .lagom3-os-icon--kalilinux { background: #557c94; }
#frmConfigureProduct .lagom3-os-icon--proxmox { background: #e57000; }

#frmConfigureProduct .lagom3-os-name {
    overflow: hidden;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.55;
    text-overflow: ellipsis;
    direction: ltr;
    text-align: left;
}

#frmConfigureProduct .lagom3-os-card[data-family="none"] .lagom3-os-name {
    direction: rtl;
    text-align: right;
}

#frmConfigureProduct .lagom3-os-family-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

#frmConfigureProduct .lagom3-os-count {
    margin-top: 2px;
    color: #7b8799;
    font-size: 11px;
    font-weight: 500;
}

#frmConfigureProduct .lagom3-os-version-panel {
    margin-top: 14px;
    padding: 15px;
    border: 1px solid #dce4ef;
    border-radius: 7px;
    background: #f7f9fc;
}

#frmConfigureProduct .lagom3-os-version-panel[hidden] {
    display: none !important;
}

#frmConfigureProduct .lagom3-os-version-title {
    margin: 0 0 11px;
    color: #49566b;
    font-size: 13px;
    font-weight: 700;
}

#frmConfigureProduct .lagom3-os-version-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 9px;
}

#frmConfigureProduct .lagom3-os-version-card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 9px 38px 9px 12px;
    border: 1px solid var(--l3-border);
    border-radius: 6px;
    color: #3c4758;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

#frmConfigureProduct .lagom3-os-version-card:hover {
    border-color: #a9b8cf;
    box-shadow: 0 3px 10px rgba(64, 84, 116, .08);
}

#frmConfigureProduct .lagom3-os-version-card.is-selected {
    border-color: #9db2d0;
    background: var(--l3-primary-soft);
}

#frmConfigureProduct .lagom3-os-version-card .lagom3-os-radio {
    right: 12px;
}

#frmConfigureProduct .lagom3-os-version-card.is-selected .lagom3-os-radio {
    border: 5px solid var(--l3-primary);
}

#frmConfigureProduct .lagom3-os-version-name {
    overflow: hidden;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;
    direction: ltr;
    text-align: left;
    text-overflow: ellipsis;
}

#frmConfigureProduct #orderSummaryMob {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    display: flex !important;
    justify-content: flex-end;
    width: 100% !important;
    padding: 0 22px 22px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#frmConfigureProduct #btnCompleteProductConfigMob {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 158px;
    min-height: 44px;
    margin: 0;
    border: 1px solid #8fbbe7;
    border-radius: 5px;
    color: #24405e;
    background: #a9cff5;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(50, 96, 140, .12);
}

#frmConfigureProduct #btnCompleteProductConfigMob:hover,
#frmConfigureProduct #btnCompleteProductConfigMob:focus {
    border-color: #76aae0;
    color: #1d3751;
    background: #98c5f2;
}

#frmConfigureProduct #btnCompleteProductConfigMob .ls {
    margin-left: 7px;
}

@media (max-width: 991px) {
    #frmConfigureProduct .panel-check-group.row,
    #frmConfigureProduct .lagom3-os-family-grid,
    #frmConfigureProduct .lagom3-os-version-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    #frmConfigureProduct.lagom3-configure-product {
        border-radius: 8px;
    }

    #frmConfigureProduct .lagom3-page-heading {
        padding: 18px 16px 15px;
    }

    #frmConfigureProduct > .main-grid {
        padding: 16px 12px 2px;
    }

    #frmConfigureProduct .panel-check-group.row,
    #frmConfigureProduct .lagom-mt-password-grid,
    #frmConfigureProduct .lagom3-os-family-grid,
    #frmConfigureProduct .lagom3-os-version-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    #frmConfigureProduct .panel.panel-check {
        min-height: 78px;
    }

    #frmConfigureProduct #orderSummaryMob {
        justify-content: stretch;
        padding: 0 12px 16px;
    }

    #frmConfigureProduct #btnCompleteProductConfigMob {
        width: 100%;
    }
}