/* testing.pikachuhosting.in: public pages (home, pricing, hosting, domains, support, contact, login/register).
   Loaded last, after site.css and client-mobile.css. Client-area pages (body.ts-client-area) are left alone.
   Section 1 applies at every width (colours only). Section 2 is phones only, so the desktop layout does not change. */

/* ---------- 1. No green on public pages ----------
   Same idea as the client area (client-mobile.css): the theme green (#17BD54) becomes the brand teal #0f766e.
   Amber and red stay as they are. */
body.pk-body:not(.ts-client-area) {
    --tg-theme-primary: #0f766e;          /* theme green: menu links, close button, hovers, focus rings */
    --tg-color-green-default: #0f766e;
}
/* (tick icons are green again: see section 3 at the end of this file) */
/* domain search: "Available" badge */
body.pk-body:not(.ts-client-area) .badge-success { background: #e6f5f5; color: #00757a; }
body.pk-body:not(.ts-client-area) .text-success { color: #00757a !important; }
body.pk-body:not(.ts-client-area) .alert-success { background: #e6f5f5; border-color: #b8e2e3; color: #00646a; }
body.pk-body:not(.ts-client-area) .btn-success { background-color: #0f766e; border-color: #0f766e; color: #fff; }
/* register: strong password bar */
body.pk-body:not(.ts-client-area) .ts-strength-bar span.strong { background: #0f766e; }
/* support page: WhatsApp card in black instead of WhatsApp green */
body.pk-body:not(.ts-client-area) .pk-support .icon.wa { background: #f1f2f4; color: #111; }
body.pk-body:not(.ts-client-area) .pk-support .card.wa-card .go { color: #0f766e; }

/* ---------- 2. Phones (up to 767px) ---------- */
@media (max-width: 767.98px) {
    /* No sideways scroll. The plan sections had their container padding removed (inline styles in
       partials/cpanel_section.php and bot_section.php), so the Bootstrap rows (-15px margins) stuck out
       15px on each side: /pricing was 405px wide at 390. Give the container its normal 16px back.
       (Home page: the plan sections sit inside another padded block already, so only the pricing pages.) */
    body.pk-body:not(.ts-client-area) .pk-pricing-page > .pricing__area > .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Empty gap under the header: the pricing pages add 120px above the first plan section
       (.pk-pricing-page .pricing__area in pikachu.css). On phones the gray band starts right under the header. */
    body.pk-body:not(.ts-client-area) .pk-pricing-page > .pricing__area:first-of-type { padding-top: 0 !important; }

    /* Monthly / Yearly pill: inside the screen with side margins, centred */
    body.pk-body:not(.ts-client-area) .pricing__area .pricing-tab {
        width: 100% !important;
        max-width: 360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    body.pk-body:not(.ts-client-area) .pricing__area .pricing-tab .tab-btn {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 6px 8px;
        font-size: 15px;
    }
    /* "20% Off" stays plain bold text: black on the white half, white on the teal half */
    body.pk-body:not(.ts-client-area) .pricing__area .pricing-tab .tab-btn strong { font-size: inherit !important; }

    /* Telegram section: Monthly / Yearly sits in the gray band, like the cPanel section above it */
    body.pk-body:not(.ts-client-area) .pk-bot-area .section__title {
        margin-bottom: 0 !important;
        padding-bottom: 20px !important;
    }
    body.pk-body:not(.ts-client-area) .pk-bot-area .pk-bot-tabs {
        margin-top: 0 !important;
        margin-bottom: 54px !important;
        background: #fff !important;
        box-shadow: 0 0 0 100vmax #EEF0F2;
        clip-path: inset(0 -100vmax -24px -100vmax);
    }

    /* plan cards: one per row, full width; old price readable */
    body.pk-body:not(.ts-client-area) .pricing__item-wrap .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
    body.pk-body:not(.ts-client-area) .pricing__price del { font-size: 12px !important; }

    /* tap targets at least 44px */
    body.pk-body:not(.ts-client-area) .mobile-nav-toggler { padding: 6px; margin: -6px; box-sizing: content-box; }
    body.pk-body:not(.ts-client-area) .pk-tld-card-btn,
    body.pk-body:not(.ts-client-area) .pk-support .btn,
    body.pk-body:not(.ts-client-area) .pk-support a.tg-btn,
    body.pk-body:not(.ts-client-area) .ts-btn-sm {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    body.pk-body:not(.ts-client-area) footer li { margin-bottom: 0 !important; }
    body.pk-body:not(.ts-client-area) footer li a { display: inline-block; padding: 10px 0; }

    /* forms: full width, 44px fields, 16px text (stops iPhone zooming in on focus) */
    body.pk-body:not(.ts-client-area) main .form-control,
    body.pk-body:not(.ts-client-area) main input[type="text"],
    body.pk-body:not(.ts-client-area) main input[type="email"],
    body.pk-body:not(.ts-client-area) main input[type="tel"],
    body.pk-body:not(.ts-client-area) main input[type="password"],
    body.pk-body:not(.ts-client-area) main select,
    body.pk-body:not(.ts-client-area) main textarea {
        width: 100%;
        max-width: 100%;
        min-height: 44px;
        font-size: 16px;
    }
    body.pk-body:not(.ts-client-area) main .tg-btn,
    body.pk-body:not(.ts-client-area) main button[type="submit"] { min-height: 44px; }
}

/* ---------- 3. Tick icons stay green (whole site: public pages and client area) ----------
   Only check marks use the theme green #17BD54; badges, buttons, links, chips and alerts stay teal/neutral.
   This file loads after client-mobile.css on every page, so these rules win over the teal there. */
body.pk-body .pk-check-icon circle { fill: #17BD54; }                       /* plan feature ticks (TS_CHECK, lib/view.php), white tick on green */
body.pk-body .ts-sites li.is-on .ts-site-badge { background: #17BD54; }     /* My Websites / My Bots: tick badge on an active service */
body.pk-body .ts-bills li.is-paid .ts-bill-badge { background: #17BD54; }   /* Billing: tick badge on a paid invoice */
body.pk-body .ts-copy.is-copied .fa-check { color: #17BD54; }              /* Copy button: the check shown with "Copied" */
body.pk-body .ts-dash-stat.is-ok .ts-dash-icon .fa-check { color: #17BD54; } /* Dashboard: "No unpaid invoices" tick */
body.pk-body .ts-note-icon.k-payment .fa-check-circle { color: #17BD54; }  /* Notifications: payment received tick */
body.pk-body .ts-sec-ok { color: #17BD54; }                                /* Security: "2-step verification on" tick */


/* ---- Phase 2: Google button, pay success, TLD table, tap targets ---- */
.ts-oauth { margin: 18px 0 8px; }
.ts-oauth-or { display: flex; align-items: center; gap: 12px; color: #6b7280; font-size: 13px; margin-bottom: 14px; }
.ts-oauth-or::before, .ts-oauth-or::after { content: ""; flex: 1; height: 1px; background: #e5e7eb; }
.ts-google-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 44px; padding: 10px 16px;
    background: #fff; color: #1f2937 !important; border: 1px solid #d1d5db; border-radius: 8px;
    font-weight: 600; font-size: 15px; text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.ts-google-btn:hover { background: #f9fafb; border-color: #9ca3af; }
.ts-pay-steps li { padding: 8px 0; font-size: 15px; }
.ts-pay-steps .fa-spinner { color: #6b7280; }
.ts-pay-ok { display: flex; justify-content: center; }

/* Domain pricing: page scrolls; cards on small screens (no nested box scroll) */
.ts-tld-wrap { overflow: visible; }
@media (max-width: 767px) {
    .ts-tld-table thead { display: none; }
    .ts-tld-table, .ts-tld-table tbody, .ts-tld-table tr, .ts-tld-table td { display: block; width: 100%; }
    .ts-tld-table tr {
        border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: #fff;
    }
    .ts-tld-table td {
        display: flex; justify-content: space-between; align-items: center;
        padding: 6px 0; border: 0; text-align: right;
    }
    .ts-tld-table td::before {
        content: attr(data-label); font-weight: 600; color: #6b7280; text-align: left; margin-right: 12px;
    }
    .ts-tld-table td.text-right { justify-content: flex-end; }
    .ts-tld-table td.text-right::before { display: none; }
    .ts-tld-table .btn, .ts-tld-table .ts-btn-sm { min-height: 44px; min-width: 44px; padding: 10px 14px; }
    /* public tap targets */
    body.pk-body:not(.ts-client-area) .tg-btn,
    body.pk-body:not(.ts-client-area) .btn { min-height: 44px; }
    body.pk-body:not(.ts-client-area) .accordion-button { min-height: 48px; }
}

/* Google button box. */
.ts-gsi-btn { display: flex; justify-content: center; min-height: 44px; }