/*
 * Prepaid fibre form (ARForms "Prepaid Fibre Offers"): the bundle chooser drawn by prepaidFibre.js and the fields it
 * fills. Shipped with the plugin so the look does not depend on the form's own CSS (which an import does not update).
 * Selectors are scoped to the btc-pf-* classes; !important only where ARForms or the form's older CSS sets the same
 * property with !important.
 */
.btc-pf-bundle-target {
    --btc-pf-green: #39AB48;
    --btc-pf-green-dark: #165c26;/* prices and the filled tick: 8.1:1 on white, 7.5:1 on the tint (AAA) */
    --btc-pf-green-tint: #f1f9f2;
    --btc-pf-ink: #1d2327;
    --btc-pf-muted: #3a434b;/* descriptions, validity: 10:1 */
    --btc-pf-line: #dfe3e6;
    --btc-pf-focus: #09569e;/* the action blue (btcac-ui.css) */
    text-align: left;
}

/* fields that only carry values */
.btc-pf-offer,
.btc-pf-nonce {
    display: none !important;
}

/* in the form's own type, not the theme's display face (the theme styles every h3) */
.btc-pf-bundle-target .btc-pf-heading {
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--btc-pf-ink) !important;
}

/* one list, one row per bundle: a price list the customer can compare at a glance */
.btc-pf-bundle-target .btc-pf-bundle-list {
    display: flex !important;
    flex-direction: column;
    gap: 0 !important;
    margin: 0 0 8px !important;
    border: 1px solid var(--btc-pf-line);
    border-radius: 4px;/* the site is square-cornered; 4px only softens */
    overflow: hidden;
    background: #fff;
}

.btc-pf-bundle-target .btc-pf-bundle {
    position: relative;
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    column-gap: 14px;
    align-items: center;
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-top: 1px solid var(--btc-pf-line) !important;
    background: #fff;
    color: var(--btc-pf-ink);
    cursor: pointer;
    transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.btc-pf-bundle-target .btc-pf-bundle:first-child {
    border-top: 0 !important;
}

.btc-pf-bundle-target .btc-pf-bundle:hover {
    background: #f7f9f8;
}

.btc-pf-bundle-target .btc-pf-bundle.btc-pf-selected {
    background: var(--btc-pf-green-tint);
    box-shadow: inset 0 0 0 1px var(--btc-pf-green);
}

/* the real radio stays in the page for keyboard and screen readers; the circle beside it is what is seen */
.btc-pf-bundle-target .btc-pf-bundle input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    pointer-events: none;
}

.btc-pf-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 2px solid #b4bcc2;
    border-radius: 50%;
    background: #fff;
    transition: border-color 160ms cubic-bezier(0.22, 1, 0.36, 1), background-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.btc-pf-check svg {
    width: 12px;
    height: 12px;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 160ms cubic-bezier(0.22, 1, 0.36, 1), transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.btc-pf-bundle:hover .btc-pf-check {
    border-color: var(--btc-pf-green);
}

.btc-pf-bundle input[type="radio"]:checked + .btc-pf-check {
    border-color: var(--btc-pf-green-dark);
    background: var(--btc-pf-green-dark);
}

.btc-pf-bundle input[type="radio"]:checked + .btc-pf-check svg {
    opacity: 1;
    transform: scale(1);
}

.btc-pf-bundle input[type="radio"]:focus-visible + .btc-pf-check {
    outline: 2px solid var(--btc-pf-focus);
    outline-offset: 3px;
}

.btc-pf-bundle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.btc-pf-bundle-target .btc-pf-bundle-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--btc-pf-ink);
}

.btc-pf-bundle-target .btc-pf-bundle-desc {
    font-size: 14px;
    line-height: 1.4;
    color: var(--btc-pf-muted);
}

.btc-pf-bundle-cost {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
    white-space: nowrap;
}

.btc-pf-bundle-target .btc-pf-bundle-price {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--btc-pf-green-dark);
    font-variant-numeric: tabular-nums;
}

.btc-pf-bundle-currency {
    font-size: 13px;
    font-weight: 600;
}

.btc-pf-bundle-validity {
    font-size: 13px;
    line-height: 1.3;
    color: var(--btc-pf-muted);
}

.btc-pf-none {
    margin: 0;
    padding: 14px 16px;
    border: 1px dashed var(--btc-pf-line);
    border-radius: 4px;
    color: var(--btc-pf-muted);
}

/* ---- the form's own fields ------------------------------------------------------------------------------------------
 * prepaidFibre.js puts .btc-pf-form on the ARForms wrapper. ARForms styles fields through the form's id
 * (#arffrm_<id>_container ...), which differs per site, so the scope carries an id-weight :not() to win without it.
 * One field = one rounded box: the icon sits inside it, focus is a blue ring, filled-in values read as read-only.
 */
.btc-pf-form:not(#btc-pf-scope) {
    --btc-pf-field-line: #c5cdd3;
    --btc-pf-field-ink: #1d2327;
    --btc-pf-field-muted: #4b5563;/* field icons */
    --btc-pf-field-focus: #09569e;
    --btc-pf-field-readonly: #f4f6f7;
}

.btc-pf-form:not(#btc-pf-scope) .arf_main_label {
    margin-bottom: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: var(--btc-pf-field-ink) !important;
}

.btc-pf-form:not(#btc-pf-scope) .arf_prefix_suffix_wrapper {
    display: flex !important;
    align-items: stretch;
    width: 100% !important;
    min-height: 44px;
    border: 1px solid var(--btc-pf-field-line) !important;
    border-radius: 4px !important;
    background: #fff !important;
    overflow: hidden;
    transition: border-color 160ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.btc-pf-form:not(#btc-pf-scope) .arf_prefix_suffix_wrapper:hover {
    border-color: #9aa6ae !important;
}

.btc-pf-form:not(#btc-pf-scope) .arf_prefix_suffix_wrapper:focus-within {
    border-color: var(--btc-pf-field-focus) !important;
    box-shadow: 0 0 0 3px rgba(9, 86, 158, 0.18);
}

.btc-pf-form:not(#btc-pf-scope) .arf_prefix_suffix_wrapper .arf_prefix {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--btc-pf-field-muted) !important;
}

.btc-pf-form:not(#btc-pf-scope) .arf_prefix_suffix_wrapper .arf_prefix i {
    color: inherit !important;
    font-size: 15px !important;
}

.btc-pf-form:not(#btc-pf-scope) .arf_prefix_suffix_wrapper input {
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 12px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 16px !important;
    color: var(--btc-pf-field-ink) !important;
}

.btc-pf-form:not(#btc-pf-scope) .arf_prefix_suffix_wrapper input::placeholder {
    color: #454f59;/* 7.7:1 even on the read-only grey */
}

/* values filled in for the customer (amount, name, fibre login): read-only, not empty boxes to type into */
.btc-pf-form:not(#btc-pf-scope) .arf_prefix_suffix_wrapper:has(input[readonly]) {
    border-color: transparent !important;
    background: var(--btc-pf-field-readonly) !important;
    box-shadow: none;
}

.btc-pf-form:not(#btc-pf-scope) .arf_prefix_suffix_wrapper input[readonly] {
    cursor: default;
    font-weight: 600;
    opacity: 1 !important;
    -webkit-text-fill-color: var(--btc-pf-field-ink) !important;/* ARForms fades read-only text */
    text-overflow: ellipsis;/* a long fibre login ends in "…"; the full value is in its title (prepaidFibre.js) */
}

/* account lookup in progress (prepaidFibre.js): a spinner at the right of the account box and of the boxes being filled */
.btc-pf-form:not(#btc-pf-scope) .arf_prefix_suffix_wrapper {
    position: relative;
}

.btc-pf-form:not(#btc-pf-scope) .arf_prefix_suffix_wrapper.btc-pf-loading input {
    padding-right: 40px !important;
}

.btc-pf-form:not(#btc-pf-scope) .arf_prefix_suffix_wrapper.btc-pf-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid #c5cdd3;
    border-top-color: #09569e;
    border-radius: 50%;
    animation: btc-pf-spin 700ms linear infinite;
}

@keyframes btc-pf-spin {
    to {
        transform: rotate(360deg);
    }
}

/* the fibre login is long (GAB-PHASE2-...@btc.bw) and is what the customer checks: a size that fits it in a half-width box */
.btc-pf-form:not(#btc-pf-scope) .btc-pf-externalid .arf_prefix_suffix_wrapper input {
    font-size: 14px !important;
    letter-spacing: -0.01em;
}

/* fallback for browsers without :has() */
.btc-pf-amount input[readonly],
.btc-pf-names input[readonly],
.btc-pf-externalid input[readonly] {
    background-color: var(--btc-pf-field-readonly, #f4f6f7) !important;
    color: #1d2327 !important;
    cursor: default;
}

/* the field with an error: ARForms marks the control group */
.btc-pf-form:not(#btc-pf-scope) .arf_error .arf_prefix_suffix_wrapper,
.btc-pf-form:not(#btc-pf-scope) .arf_warning .arf_prefix_suffix_wrapper {
    border-color: #c62828 !important;
}

/* payment method: the same rounded box and line colour as the fields */
.btc-pf-form:not(#btc-pf-scope) .setting_radio {
    margin-top: 6px !important;
    border-color: var(--btc-pf-field-line) !important;
    border-radius: 4px !important;
}

/* ARForms' own grey text (payment option, receipt switch, terms) at #706d70 is 5.1:1: darkened to 10:1 */
.btc-pf-form:not(#btc-pf-scope) .arf_radiobutton label,
.btc-pf-form:not(#btc-pf-scope) .arf_checkbox_style label,
.btc-pf-form:not(#btc-pf-scope) .arf_checkbox_input_wrapper + label,
.btc-pf-form:not(#btc-pf-scope) .arf_input_field_switch_wrapper span,
.btc-pf-form:not(#btc-pf-scope) .arf_htmlfield_control,
.btc-pf-form:not(#btc-pf-scope) .arf_htmlfield_control .contentBox {
    color: #3a434b !important;
}

/* required marker: ARForms' #ff0000 is 4:1 */
.btc-pf-form:not(#btc-pf-scope) .arfcheckrequiredfield {
    color: #b42318 !important;
}

/* Buy Now / Confirm / Edit: btcac-ui.css (one action blue on every form) */

/* narrow form (phones): the price moves under the description instead of squeezing it into a thin column */
.btc-pf-bundle-target {
    container-type: inline-size;
}

@container (max-width: 420px) {
    .btc-pf-bundle-target .btc-pf-bundle {
        grid-template-columns: 22px minmax(0, 1fr);
        column-gap: 12px;
        align-items: start;
        padding: 12px !important;
    }

    .btc-pf-check {
        margin-top: 1px;
    }

    .btc-pf-bundle-cost {
        grid-column: 2;
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        margin-top: 6px;
        text-align: left;
    }

    .btc-pf-bundle-validity::before {
        content: "· ";
    }

    .btc-pf-bundle-target .btc-pf-bundle-price {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btc-pf-bundle-target .btc-pf-bundle,
    .btc-pf-check,
    .btc-pf-check svg {
        transition: none;
    }

    /* still a sign that something is happening, just slower */
    .btc-pf-form:not(#btc-pf-scope) .arf_prefix_suffix_wrapper.btc-pf-loading::after {
        animation-duration: 2s;
    }
}

/* ---- confirm summary (ARForms lists the fields before "Confirm"; prepaidFibre.js tidies the rows) --------------------- */
.btc-pf-form:not(#btc-pf-scope) .arf_confirmation_summary_wrapper .arftitlecontainer {
    display: none !important;/* an empty title block: ~200px of white above the summary */
}

.btc-pf-form:not(#btc-pf-scope) .arf_confirmation_summary_inner_wrapper {
    margin: 0 auto !important;
    padding: 8px 0 0 !important;
}

.btc-pf-summary-heading {
    margin: 0 0 18px;
}

.btc-pf-form:not(#btc-pf-scope) .btc-pf-summary-heading h3 {
    margin: 0 0 4px !important;
    font-family: inherit !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: #1d2327 !important;
}

.btc-pf-form:not(#btc-pf-scope) .btc-pf-summary-heading p {
    margin: 0 !important;
    font-size: 14px;
    color: #3a434b;
}

/* a label / value list with hairlines, labels left-aligned like the form */
.btc-pf-form:not(#btc-pf-scope) .arf_confirmation_summary_row_wrapper {
    display: grid !important;
    grid-template-columns: minmax(150px, 34%) minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
    margin: 0 !important;
    padding: 11px 0 !important;
    border-top: 1px solid #e3e7ea;
}

.btc-pf-form:not(#btc-pf-scope) .arf_confirmation_summary_row_wrapper.btc-pf-summary-hidden {
    display: none !important;
}

.btc-pf-form:not(#btc-pf-scope) .arf_confirmation_summary_label {
    width: auto !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #3a434b !important;
}

.btc-pf-form:not(#btc-pf-scope) .arf_confirmation_summary_label .arfcheckrequiredfield,
.btc-pf-form:not(#btc-pf-scope) .arf_confirmation_summary_label span[style*="color"] {
    display: none !important;/* "*" marks required inputs; nothing is entered here */
}

.btc-pf-form:not(#btc-pf-scope) .arf_confirmation_summary_input {
    width: auto !important;
    padding: 0 !important;
    overflow-wrap: anywhere;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1d2327 !important;
}

/* the bundle row: what is being bought, in the price green */
.btc-pf-form:not(#btc-pf-scope) .btc-pf-summary-bundle .arf_confirmation_summary_input {
    color: #165c26 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.btc-pf-form:not(#btc-pf-scope) .arf_confirmation_summary_submit_wrapper {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid #e3e7ea;
}

@container (max-width: 420px) {
    .btc-pf-form:not(#btc-pf-scope) .arf_confirmation_summary_row_wrapper {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
}

@media (max-width: 480px) {
    .btc-pf-form:not(#btc-pf-scope) .arf_confirmation_summary_row_wrapper {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
}