/* sipcall Preisrechner - UI in official sipcall look
   Color values from sipcall.ch:
   Blue  #084683 / #00417d / #416599
   Orange #fe9e16 / #fdba13 (CTA)
   Gray  #b6b7b9 / #e6e7e9 / #444444 */

/* Open Sans hosted locally (privacy: no request to Google Fonts).
   Variable Font, covers weights 300-800 with one file per subset. */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('../fonts/open-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('../fonts/open-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --sip-blue: #084683;
    --sip-blue-dark: #00417d;
    --sip-blue-mid: #416599;
    --sip-blue-soft: #6180ae;
    --sip-blue-bg: #eef3f9;
    --sip-orange: #fe9e16;
    --sip-orange-light: #fdba13;
    /* Button colors from www.sipcall.ch (.button-bes): Blue, Hover-Orange */
    --sip-btn-blue: #23497e;
    --sip-btn-hover: #f5a000;
    --sip-gray: #b6b7b9;
    --sip-gray-light: #e6e7e9;
    --ink: #444444;
    --ink-strong: #222222;
    --ink-soft: #6b7683;
    --line: #e6e7e9;
    --card: #ffffff;
    /* Warning and error notices: red, so they stand out from the Orange of
       selection accents */
    --warn: #c62828;
    --warn-bg: #fdecec;
    --warn-border: #ef9a9a;
    --ok-bg: #eef5e0;
    --ok-border: #b9cf63;
    --radius: 14px;
    --shadow: 0 6px 24px rgba(8, 70, 131, 0.08);
    --shadow-strong: 0 10px 32px rgba(8, 70, 131, 0.16);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 15px;
    color: var(--ink);
    /* Exactly the content background of www.sipcall.ch (rgb(230, 231, 233)),
       so the calculator blends seamlessly into the page in iframe */
    background: #e6e7e9;
    -webkit-font-smoothing: antialiased;
}

/* Embedding as iframe (?embed=1): compact, same background as the page */
body.pf-embed { background: #e6e7e9; }
body.pf-embed .pf-shell { padding-top: 10px; }

.pf-shell {
    max-width: 820px;
    margin: 0 auto;
    padding: 28px 16px 140px; /* Space for the total bar */
}

/* ---------- Fallback without JavaScript ---------- */
.pf-noscript {
    max-width: 820px;
    margin: 28px auto 0;
    padding: 24px 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    line-height: 1.55;
}

.pf-noscript h1 {
    margin: 0 0 10px;
    font-size: 24px;
    color: var(--sip-blue);
}

.pf-noscript-hint {
    padding: 12px 14px;
    background: #fff7ea;
    border: 1px solid #f3d9a8;
    border-radius: 10px;
    color: #8a5a12;
    font-weight: 600;
}

/* ---------- Header ---------- */
.pf-header { text-align: center; margin-bottom: 24px; position: relative; }

/* Language selection DE | FR (only visible on direct access, in iframe the URL controls) */
.pf-lang {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 13px;
    color: var(--sip-gray);
}

.pf-lang a {
    color: var(--ink-soft);
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 6px;
}

.pf-lang a:hover { color: var(--sip-blue); }

.pf-lang a.pf-lang-active {
    color: var(--sip-blue);
    font-weight: 700;
}

/* Modest page title without logo: The calculator runs embedded on
    sipcall.ch, the text is already in the page header. */
.pf-brand {
    font-size: 30px;
    font-weight: 700;
    color: var(--sip-blue);
}

.pf-claim { margin: 6px 0 0; color: var(--ink-soft); }

/* On smartphones, the absolute language selection collides with the title:
    own line above, title slightly smaller */
@media (max-width: 640px) {
    .pf-lang { position: static; display: block; text-align: right; margin-bottom: 2px; }
    .pf-brand { font-size: 24px; }
}

/* ---------- Step Navigation ---------- */
.pf-steps {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.pf-step-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 999px;
    padding: 7px 14px;
    cursor: pointer;
    font: inherit;
    color: var(--ink-soft);
    transition: all .15s ease;
}

.pf-step-tab .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--sip-gray-light);
    font-size: 12px;
    font-weight: 700;
}

.pf-step-tab.pf-step-current {
    border-color: var(--sip-blue);
    color: var(--sip-blue);
    box-shadow: var(--shadow);
}

.pf-step-tab.pf-step-current .num,
.pf-step-tab.pf-step-done .num {
    background: var(--sip-blue);
    color: #fff;
}

.pf-step-tab.pf-step-done { color: var(--sip-blue); }

/* Locked steps: only accessible when all required fields are filled */
.pf-step-tab:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

@media (max-width: 640px) {
    .pf-step-tab .lbl { display: none; }
    .pf-step-tab { padding: 7px 9px; }
}

/* ---------- Coach with speech bubble ---------- */
.pf-coach {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 26px;
}

.pf-coach-img {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    outline: 2px solid var(--sip-orange);
    outline-offset: 1px;
    box-shadow: var(--shadow);
    flex-shrink: 0;
    transform-origin: 50% 90%;
}

/* The coach "speaks": slight head movement while typing */
.pf-coach-img.pf-speaking {
    animation: pf-talk 0.55s ease-in-out infinite;
}

@keyframes pf-talk {
    0%   { transform: rotate(0deg) scale(1); }
    25%  { transform: rotate(-2.5deg) scale(1.02); }
    50%  { transform: rotate(0deg) scale(1); }
    75%  { transform: rotate(2.5deg) scale(1.03); }
    100% { transform: rotate(0deg) scale(1); }
}

.pf-bubble {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    border-bottom-left-radius: 4px;
    padding: 14px 18px;
    box-shadow: var(--shadow);
    line-height: 1.55;
    min-height: 48px;
    animation: pf-bubble-in .28s ease-out;
}

@keyframes pf-bubble-in {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pf-bubble::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 24px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-left: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transform: rotate(45deg);
}

/* Blinking cursor at the end while typing */
.pf-bubble.pf-bubble-typing::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 15px;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--sip-orange);
    border-radius: 2px;
    animation: pf-caret 0.6s steps(1) infinite;
}

@keyframes pf-caret {
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-coach-img.pf-speaking { animation: none; }
    .pf-bubble { animation: none; }
}

/* ---------- Headings ---------- */
/* Headings like on sipcall.ch: #222, normal weight (there h3: 23px/400) */
h2 { font-size: 23px; font-weight: 400; color: var(--ink-strong); margin: 0 0 18px; }
h2 small { font-weight: 400; color: var(--ink-soft); font-size: 15px; }
h3 { font-size: 17px; font-weight: 600; color: var(--ink-strong); margin: 26px 0 12px; }

/* ---------- Cards ---------- */
.pf-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 14px;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.pf-card:hover { box-shadow: var(--shadow); }

.pf-card-active {
    border-color: var(--sip-blue);
    box-shadow: var(--shadow-strong);
}

.pf-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    flex-wrap: wrap;
}

.pf-card-head input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--sip-blue);
    cursor: pointer;
}

.pf-card-head-static {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.pf-card-title { font-weight: 600; font-size: 16px; color: var(--ink-strong); }

.pf-card-price {
    margin-left: auto;
    color: var(--sip-blue);
    font-weight: 600;
    font-size: 13px;
}

.pf-card-desc {
    margin: 8px 0 0 32px;
    color: var(--ink-soft);
    font-size: 13.5px;
}

.pf-card-open .pf-card-desc { margin-left: 0; }

/* Included services (only virtual pbx) and the link to the
    solution page. Both at the same indent as .pf-card-desc, so they start under
    the description text and not under the checkbox. */
.pf-card-features-title {
    margin: 12px 0 5px 32px;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 600;
}

.pf-card-features {
    margin: 0 0 0 32px;
    padding: 0;
    list-style: none;
    color: var(--ink-soft);
    font-size: 13px;
}

.pf-card-features li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 3px;
}

/* U+2713 as CSS content instead of a checkmark emoji: The emoji falls back to an
    empty box depending on the system font - same reasoning as in
    the gift list of the Odoo report. */
.pf-card-features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--sip-orange);
    font-weight: 700;
}

.pf-card-more {
    margin: 12px 0 0 32px;
    font-size: 13px;
}

.pf-card-more a {
    color: var(--sip-blue);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(8, 70, 131, .3);
}

.pf-card-more a:hover { border-bottom-color: var(--sip-blue); }

/* Arrow as suffix: indicates the link leaves the page. */
.pf-card-more a::after { content: " \2192"; }

.pf-card-body { margin-top: 14px; }

/* Sub-option (e.g. Geo-redundancy for Microsoft Teams) */
.pf-suboption {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--sip-blue-bg);
    border-radius: 10px;
}

.pf-suboption-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.pf-suboption-head input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--sip-blue);
    cursor: pointer;
    flex-shrink: 0;
}

.pf-suboption-head span { font-weight: 600; font-size: 14px; color: var(--ink-strong); }

.pf-suboption-head small {
    display: block;
    font-weight: 400;
    color: var(--ink-soft);
    font-size: 12.5px;
    margin-top: 2px;
}

/* Sub-option sipcall voice-/faxbox for virtual pbx: title with price,
    explanation, three counters (Voicebox, IVR, Faxbox) and the IVR notice */
.pf-suboption-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.pf-suboption-title span { font-weight: 600; font-size: 14px; color: var(--ink-strong); }
.pf-suboption-title small { color: var(--ink-soft); font-size: 12.5px; }

.pf-suboption-vfb .pf-note { margin: 4px 0 6px; line-height: 1.5; }
.pf-suboption-vfb .pf-stepper-row { border-top-color: #cfdcea; }
.pf-suboption-vfb .pf-hint { margin-bottom: 0; }

/* ---------- Stepper rows ---------- */
.pf-stepper-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}

.pf-card-body .pf-stepper-row:first-child { border-top: none; }

.pf-stepper-row > span { line-height: 1.4; }

.pf-stepper-row small {
    display: block;
    color: var(--ink-soft);
    font-size: 12.5px;
    max-width: 420px;
}

.pf-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--sip-gray-light);
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #fff;
}

.pf-stepper button {
    width: 38px;
    height: 38px;
    border: none;
    background: var(--sip-blue-bg);
    color: var(--sip-blue);
    font-size: 20px;
    cursor: pointer;
    transition: background .1s;
}

.pf-stepper button:hover { background: #dbe7f4; }

.pf-stepper input {
    width: 58px;
    height: 38px;
    border: none;
    text-align: center;
    font: inherit;
    font-weight: 600;
    color: var(--ink-strong);
    -moz-appearance: textfield;
    appearance: textfield;
}

.pf-stepper input::-webkit-outer-spin-button,
.pf-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pf-subquestion {
    margin-top: 12px;
    padding: 6px 14px;
    background: var(--sip-blue-bg);
    border-radius: 10px;
}

.pf-subquestion .pf-stepper-row { border-top: none; }

/* ---------- Selection tiles (Radio) ---------- */
.pf-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pf-contract-grid { grid-template-columns: repeat(4, 1fr); }

.pf-flat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}

.pf-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Subsections within a card (sipcall internet: bandwidth,
    device, IP addresses) */
.pf-subheading {
    margin: 18px 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-strong);
}
.pf-subheading small { font-weight: 400; color: var(--ink-soft); font-size: 12.5px; }
.pf-internet-body .pf-subheading:first-child { margin-top: 4px; }
.pf-internet-body .pf-note { margin: 0 0 8px; }
.pf-internet-body .pf-hint { margin-top: 10px; }

@media (max-width: 640px) {
    .pf-choice-grid, .pf-flat-grid, .pf-contract-grid, .pf-grid-3 { grid-template-columns: 1fr; }
}

.pf-choice {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    cursor: pointer;
    transition: all .15s ease;
}

.pf-choice:hover { box-shadow: var(--shadow); }

.pf-choice input { position: absolute; opacity: 0; pointer-events: none; }

.pf-choice-selected {
    border-color: var(--sip-blue);
    box-shadow: var(--shadow-strong), inset 0 3px 0 var(--sip-orange);
    background: linear-gradient(180deg, #fff 0%, var(--sip-blue-bg) 140%);
}

/* Gesperrte Auswahl (z.B. sipcall pro bei Teams/Flatrate):
   bleibt klickbar, damit der Hinweis erscheint */
.pf-choice-locked {
    opacity: 0.55;
    cursor: not-allowed;
    background: #f7f7f7;
}

.pf-choice-locked:hover { box-shadow: none; }

.pf-choice-title { font-weight: 600; color: var(--ink-strong); }
/* Flat scope "(only CH)" / "(CH & Europe)" on its own line */
.pf-choice-scope { font-weight: 400; color: var(--ink-soft); }
.pf-choice-price { color: var(--sip-blue); font-weight: 600; font-size: 13.5px; }
.pf-choice-price em { display: block; font-style: normal; font-weight: 400; color: var(--ink-soft); font-size: 12px; }
.pf-choice-sub { color: var(--ink-soft); font-size: 12.5px; }

/* ---------- Channel Slider ---------- */
.pf-slider-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 10px 0 14px;
}

.pf-slider-row input[type="range"] {
    flex: 1;
    accent-color: var(--sip-orange);
    height: 6px;
}

.pf-dynamic-box {
    background: linear-gradient(135deg, var(--sip-blue-dark), var(--sip-blue-mid));
    color: #fff;
    border-radius: var(--radius);
    padding: 16px 20px;
    line-height: 1.7;
    box-shadow: var(--shadow-strong);
}

.pf-dynamic-box strong { color: var(--sip-orange-light); }

/* Effect of selected channels (they apply to the whole account) */
.pf-flat-effect {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .25);
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
}

.pf-note { color: var(--ink-soft); font-size: 13px; }
.pf-note a { color: var(--sip-blue); }

/* Partner note under "Your details for the quote" */
.pf-form-note { margin: -6px 0 18px; line-height: 1.5; }

/* ---------- Notices ---------- */
/* Two levels:
   .pf-hint-warn  - Warning (red, exclamation mark): Configuration is possible,
                    but requires explanation (e.g. more options than phone numbers,
                    over 10 flat channels, sipcall pro blocked).
   .pf-hint-block - Block (red, X): Cannot proceed (no solution,
                    no phone number, trunk with only one number, sipcall
                    internet without bandwidth). */
.pf-hint-warn, .pf-hint-block {
    /* Icon absolute left, text as normal flow text: A Flex container
        would break text nodes and links into separate elements. */
    position: relative;
    padding-left: 46px;
    background: var(--warn-bg);
    border-color: var(--warn-border);
    color: var(--warn);
    font-weight: 500;
    border-radius: 10px;
}

.pf-hint-warn a, .pf-hint-block a { color: var(--warn); text-decoration: underline; }

.pf-hint-warn::before, .pf-hint-block::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

/* Exclamation mark in circle */
.pf-hint-warn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23c62828'/%3E%3Crect x='9' y='4.5' width='2' height='7' rx='1' fill='%23fff'/%3E%3Ccircle cx='10' cy='14.5' r='1.3' fill='%23fff'/%3E%3C/svg%3E");
}

/* X in circle */
.pf-hint-block {
    border-color: var(--warn);
    border-width: 1.5px;
}

.pf-hint-block::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23c62828'/%3E%3Cpath d='M6.5 6.5l7 7M13.5 6.5l-7 7' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.pf-hint[hidden] { display: none; }

/* Extra space above the pro warning to separate it from the radio grid */
#abo-pro-warning:not([hidden]) { margin-top: 14px; }

/* Reference to the block: Set on "Next" despite missing required field
    - the notice shakes briefly and flashes, so the eye goes
    there. No outline on programmatic focus. */
.pf-hint-block:focus { outline: none; }

.pf-hint-attention {
    animation: pf-hint-shake 0.5s ease, pf-hint-flash 1.6s ease;
}

@keyframes pf-hint-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}

@keyframes pf-hint-flash {
    0%   { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0.55); }
    40%  { box-shadow: 0 0 0 6px rgba(198, 40, 40, 0.25); }
    100% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .pf-hint-attention { animation: pf-hint-flash 1.6s ease; }
}

/* ---------- Cost overview ---------- */
.pf-summary {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.pf-summary th, .pf-summary td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}

/* Number columns (count and amounts) centered */
.pf-summary th.num, .pf-summary td.num { text-align: center; white-space: nowrap; }

.pf-summary thead th {
    /* Flat sipcall blue instead of gradient, like the areas on the website */
    background: var(--sip-blue);
    color: #fff;
    font-weight: 600;
    border-bottom: none;
}

.pf-summary .pf-summary-group td {
    background: var(--sip-blue-bg);
    font-weight: 700;
    color: var(--sip-blue);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.pf-summary td small { display: block; color: var(--ink-soft); font-size: 12px; }

.pf-summary tfoot td {
    font-weight: 700;
    font-size: 15.5px;
    color: var(--ink-strong);
    background: #fdf3e3;
    border-top: 2px solid var(--sip-orange);
    border-bottom: none;
}

/* Safety net for very narrow devices: table remains horizontally
    scrollable if it doesn't fit despite compact layout */
#summary-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 640px) {
    /* More compact cells so the table fits in the smartphone viewport */
    .pf-summary th, .pf-summary td { padding: 8px 5px; font-size: 12.5px; }
    .pf-summary td small { font-size: 11px; }
    .pf-summary tfoot td { font-size: 13.5px; }
}

.pf-infos { margin-top: 14px; }
.pf-infos p { color: var(--ink-soft); font-size: 13px; margin: 6px 0; }

/* ---------- Buttons & Navigation ---------- */
/* Three fixed columns: Back left, Restart center, Next right. Fixed
    column assignment so the buttons stay in place even if
    one of them is hidden (step 1: only Next; step 6: no Next).
    The restart discards everything - app.js therefore asks before resetting. */
.pf-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
}

.pf-nav #btn-back    { grid-column: 1; justify-self: start; }
.pf-nav #btn-restart { grid-column: 2; justify-self: center; }
.pf-nav #btn-next    { grid-column: 3; justify-self: end; }

@media (max-width: 640px) {
    /* Three buttons don't fit side by side: Restart in a second row */
    .pf-nav { grid-template-columns: 1fr 1fr; }
    .pf-nav #btn-back    { grid-column: 1; grid-row: 1; }
    .pf-nav #btn-next    { grid-column: 2; grid-row: 1; }
    .pf-nav #btn-restart { grid-column: 1 / -1; grid-row: 2; }
}

/* Button design like on www.sipcall.ch (.button-bes): blue pill
    #23497e, Orange on hover #f5a000 with slight lift and shadow */
.pf-btn {
    font: inherit;
    font-weight: 400;
    padding: 12px 28px;
    border-radius: 999px;
    border: 1px solid var(--sip-gray);
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    transition: background-color .25s, color .25s, transform .2s, box-shadow .2s;
}

.pf-btn:hover { box-shadow: var(--shadow); }

.pf-btn-primary {
    background: var(--sip-btn-blue);
    border-color: var(--sip-btn-blue);
    color: #fff;
    box-shadow: 0 4px 12px rgba(35, 73, 126, 0.25);
}

.pf-btn-primary:hover {
    background: var(--sip-btn-hover);
    border-color: var(--sip-btn-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(245, 160, 0, 0.35);
}

.pf-btn:disabled { opacity: .6; cursor: wait; transform: none; }

/* ---------- Live total bar ---------- */
.pf-totalbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-top: 2px solid var(--sip-blue);
    box-shadow: 0 -6px 24px rgba(8, 70, 131, 0.12);
    z-index: 50;
}

/* Centered, since the details button is gone: Without it the two
    amounts would be on the left and half the bar would remain visible empty. */
.pf-totalbar-inner {
    max-width: 820px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.pf-total { display: flex; flex-direction: column; }
.pf-total .lbl { font-size: 12px; color: var(--ink-soft); }
.pf-total .val { font-size: 19px; font-weight: 700; color: var(--ink-strong); }
.pf-total-monthly .val { color: var(--sip-blue); font-size: 23px; }

/* Footnote for the asterisk: call costs apply with the minute tariff */
.pf-total-star { font-size: 11px; color: var(--ink-soft); }

@media (max-width: 640px) {
    /* Amounts must not wrap ("CHF" and amount on one line) */
    .pf-totalbar-inner { gap: 16px; padding: 10px 12px; }
    .pf-total .val { font-size: 17px; white-space: nowrap; }
    .pf-total-monthly .val { font-size: 20px; }
}

/* ---------- Quote form ---------- */
.pf-offer-cta { text-align: center; margin: 26px 0; }

.pf-offer-form {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 22px;
    box-shadow: var(--shadow);
    margin-top: 10px;
}

.pf-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 640px) { .pf-form-grid { grid-template-columns: 1fr; } }

.pf-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
}

.pf-form-wide { grid-column: 1 / -1; }

.pf-form-grid input, .pf-form-grid textarea, .pf-form-grid select {
    font: inherit;
    padding: 10px 12px;
    border: 1px solid var(--sip-gray-light);
    border-radius: 8px;
    background: #fcfcfc;
}

.pf-form-grid input:focus, .pf-form-grid textarea:focus, .pf-form-grid select:focus {
    outline: 2px solid var(--sip-blue-soft);
    border-color: transparent;
}

.pf-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0;
    font-size: 13px;
    color: var(--ink-soft);
}

.pf-consent input { margin-top: 2px; accent-color: var(--sip-blue); }
.pf-consent a { color: var(--sip-blue); }

/* Invalid fields after submit: red border on input field, for the
    consent the whole line - the marking stays until corrected */
.pf-form-grid input.pf-invalid, .pf-form-grid select.pf-invalid, .pf-form-grid textarea.pf-invalid {
    border-color: var(--warn);
    background: var(--warn-bg);
}
.pf-consent.pf-invalid { color: var(--warn); font-weight: 500; }
.pf-consent.pf-invalid input { outline: 2px solid var(--warn); outline-offset: 1px; accent-color: var(--warn); }

/* Form error message: same design as the step warnings */
.pf-form-error { margin: 0 0 14px; }

.pf-form-actions { display: flex; align-items: center; gap: 16px; }
/* Turnstile widget (only in DOM with configured keys); in mode
    interaction-only it stays empty as long as no check is needed */
.pf-turnstile:not(:empty) { margin: 0 0 14px; }
.pf-form-status { color: var(--ink-soft); font-size: 13px; }

.pf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.pf-success {
    background: var(--ok-bg);
    border: 1px solid var(--ok-border);
    border-radius: var(--radius);
    padding: 18px 22px;
    margin-top: 16px;
    line-height: 1.6;
}