/* =============================================================
   Apple-native typography + macOS/iOS login refinement
   -------------------------------------------------------------
   GOAL: make the wowonder theme feel like a native macOS / iOS
   surface by replacing the scattered Segoe UI / Roboto / Lato /
   Hind / Poppins / Open Sans declarations with the Apple system
   font stack and Apple HIG-aligned tracking, weights, and
   rendering hints.

   RULES:
   - Typography only. NO color tokens are changed. Existing
     `btn_background_color`, `header_color`, `body_background`
     etc. continue to drive theme colors.
   - This file is loaded AFTER style.css / welcome.css /
     pancitan-theme.css so the cascade wins without `!important`
     spam (used only where the original sheet itself used
     `!important` or inline `font-family`).
   - Login (welcome) page gets the macOS/iOS native polish at the
     bottom of this file; layout and structure are preserved.
   ============================================================= */

:root {
    /* San Francisco / Apple system stack. -apple-system maps to
       SF Pro on macOS/iOS, BlinkMacSystemFont covers Chrome on
       macOS, then graceful degradation. */
    --pcnt-font-system:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Text",
        "SF Pro Display",
        "Helvetica Neue",
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --pcnt-font-display:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        "Helvetica Neue",
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --pcnt-font-mono:
        ui-monospace,
        SFMono-Regular,
        "SF Mono",
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;

    /* Apple HIG tracking values (approximate, in em). */
    --pcnt-tracking-display: -0.022em;   /* SF Pro Display, large */
    --pcnt-tracking-title:   -0.018em;
    --pcnt-tracking-body:    -0.005em;   /* SF Pro Text body */
    --pcnt-tracking-caption:  0.012em;   /* SF Pro Text caption */
}

/* ---------- Global base ---------------------------------------------- */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body,
body.night-mode {
    font-family: var(--pcnt-font-system);
    font-size: 15px;
    line-height: 1.47;
    letter-spacing: var(--pcnt-tracking-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-synthesis: none;
    font-feature-settings: "ss01", "cv11", "kern";
}

/* Apple uses real numeric features for stats / counts. */
.notification-count,
.wo_count,
.wow_mini_wallets h5,
.ads_mini_wallet h3,
.wow_wallet_trans,
.events-list-checked,
.event_cdown,
.likes-info,
.share-info,
time {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum", "ss01", "kern";
}

/* ---------- Headings ------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.panel-title,
.modal-title,
.sidebar-title {
    font-family: var(--pcnt-font-display);
    font-weight: 600;
    letter-spacing: var(--pcnt-tracking-title);
    -webkit-font-smoothing: antialiased;
}

h1, .h1 { font-weight: 700; letter-spacing: var(--pcnt-tracking-display); }
h2, .h2 { font-weight: 700; letter-spacing: var(--pcnt-tracking-display); }

/* ---------- Override scattered legacy font-family declarations ------- */
/* The base style.css inlines `font-family: Segoe UI Historic, Segoe UI...`
   on dozens of selectors. We catch the broad ones here with matching
   specificity so we don't need a wildcard `*`. */

body,
.btn,
.btn-mat,
.btn-main,
.btn-login,
.btn-register,
.btn-active,
input,
select,
textarea,
button,
.form-control,
.dropdown-menu,
.dropdown-menu > li > a,
.modal,
.modal-content,
.modal-header,
.modal-body,
.modal-footer,
.panel,
.panel-body,
.panel-heading,
.tooltip,
.tooltip-inner,
.popover,
.popover-content,
.popover-title,
.alert,
.label,
.badge,
.nav-tabs > li > a,
.nav-pills > li > a,
.list-group-item,
.navbar,
.navbar-nav > li > a,
.navbar-default .navbar-nav > li > a,
.search-container .search-input,
.publisher-box .publisher-hidden-option #percent,
.wow_chat_hdr_usr,
.wo_about_wrapper,
.wo_about_wrapper_parent,
.notification-list,
.notification-list span.main-color,
.create_head_menu li a,
.wow_mini_wallets h5,
.ads_mini_wallet h3,
.wow_wallet_trans,
.wow_ads_list_head,
.wow_creads_minstp,
.wow_add_money_hid_form .add-amount h5,
.wow_snd_money_form .add-amount h5,
.wow_hdr_requests,
.chat-container,
.chat-user-desc,
.chat-messages-wrapper .message-group_owner,
.chat-textarea .chat-btns-w .record_timei,
.home-sidebar.profile-style.wow_add_groupcht_mmbrs,
.chat-recording-time,
.hind,
.payments,
.cool-style-album .album_parent,
.wow_usr_steps,
.events-list-cover,
.event_cdown,
.event_two_blocks,
.footer-wrapper,
.footer-wrapper-sidebar,
.ads-navbar-wrapper ul li a,
#select-status-media,
#video-form .inner-addon span.video-custom-thumb,
.blog-com-wrapper .blog-comlist-container .blog-comment-item .blog-comment-item-body p,
.movies-com-wrapper .movies-comlist-container .movies-comment-item .movies-comment-item-body p {
    font-family: var(--pcnt-font-system) !important;
}

/* Welcome / login form Poppins import is force-applied via the
   element selector body. */
body {
    font-family: var(--pcnt-font-system) !important;
}

/* The legacy Roboto wow_pops_head h4 keeps its visual weight but
   adopts SF Pro Display. */
.wow_pops_head h4,
.btn-mat,
.payment_box .btn {
    font-family: var(--pcnt-font-display) !important;
    font-weight: 500;
}

/* The OpenSans @font-face aliases are still loaded by style.phtml
   but nothing should USE them anymore. Map them defensively. */
[style*="font-family: OpenSans"],
[style*="font-family:OpenSans"] {
    font-family: var(--pcnt-font-system) !important;
}

/* ---------- Inputs feel iOS-native ----------------------------------- */

input,
textarea,
select,
button,
.btn {
    font-family: var(--pcnt-font-system);
    letter-spacing: var(--pcnt-tracking-body);
    -webkit-font-smoothing: antialiased;
}

input::placeholder,
textarea::placeholder {
    font-family: var(--pcnt-font-system);
    letter-spacing: var(--pcnt-tracking-body);
    opacity: 0.55;
}

/* iOS prevents zoom-on-focus when input font-size >= 16px. */
@media (max-width: 640px) {
    input,
    textarea,
    select {
        font-size: 16px;
    }
}

/* Native-feeling caret + selection on Apple platforms. */
input,
textarea {
    caret-color: currentColor;
}

/* ---------- Code / numeric surfaces ---------------------------------- */

code, kbd, pre, samp,
.wow_form_fields input[type="number"] {
    font-family: var(--pcnt-font-mono);
    font-feature-settings: "tnum", "kern";
}

/* =============================================================
   WELCOME / LOGIN — macOS + iOS native polish
   -------------------------------------------------------------
   No color overrides. Only typography, spacing, motion, depth,
   and surface materials change so the page evokes a native
   System Preferences-style sign-in sheet on macOS and a
   first-launch sign-in screen on iOS.
   ============================================================= */

.login {
    font-family: var(--pcnt-font-system);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* macOS-style large welcome headline. Tightly tracked SF Pro Display. */
.login_left_combo h1 {
    font-family: var(--pcnt-font-display);
    font-weight: 700;
    font-size: clamp(34px, 4.2vw, 48px);
    line-height: 1.08;
    letter-spacing: var(--pcnt-tracking-display);
    margin: clamp(48px, 9vw, 100px) 0 0;
    text-wrap: balance;
}

.login_left_combo p {
    font-family: var(--pcnt-font-system);
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: var(--pcnt-tracking-body);
    opacity: 0.78;
    max-width: 440px;
}

/* The right-side form behaves like a macOS sheet / iOS modal:
   centered, generous safe-area padding, SF-aligned headings. */

.login_innre {
    padding: clamp(20px, 4vw, 56px) clamp(20px, 5vw, 64px);
    padding-top: max(env(safe-area-inset-top, 0px), 24px);
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 24px);
}

.login .title,
.login .title.main {
    font-family: var(--pcnt-font-display);
    font-weight: 600;
    font-size: clamp(28px, 3vw, 34px);
    line-height: 1.12;
    letter-spacing: var(--pcnt-tracking-display);
    margin: 0 0 6px;
    text-wrap: balance;
}

.login .desc {
    font-family: var(--pcnt-font-system);
    font-size: 15px;
    line-height: 1.47;
    letter-spacing: var(--pcnt-tracking-body);
    opacity: 0.62;
    margin-bottom: 28px;
}

/* macOS form-field labels: small caps-feeling SF Text, not bold. */
.wow_form_fields > label {
    font-family: var(--pcnt-font-system);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: var(--pcnt-tracking-caption);
    text-transform: none;
    opacity: 0.7;
    margin-bottom: 6px;
}

/* iOS-style "filled" text field: large radius, tighter focus ring,
   font already at 16px from the mobile rule above. We keep the
   existing background/box-shadow tokens from welcome.css so the
   color scheme is untouched. */
.wow_form_fields input,
.wow_form_fields textarea,
.wow_form_fields select,
.wow_form_fields > .bootstrap-select.btn-group > .dropdown-toggle {
    font-family: var(--pcnt-font-system);
    font-size: 17px;            /* iOS body */
    line-height: 1.4;
    letter-spacing: var(--pcnt-tracking-body);
    border-radius: 14px;        /* iOS field corner */
    padding: 14px 16px;
    transition:
        background-color 200ms ease,
        box-shadow 200ms ease,
        transform 200ms ease;
}

.wow_form_fields input:focus,
.wow_form_fields textarea:focus,
.wow_form_fields select:focus {
    /* Keep the existing focus shadow tokens from welcome.css —
       this only sharpens motion, not color. */
    transition-duration: 120ms;
}

/* macOS-style "forgot password" inline link row. */
.forgot_password {
    margin: -2px 0 36px;
}
.forgot_password > a {
    font-family: var(--pcnt-font-system);
    font-size: 14px;
    letter-spacing: var(--pcnt-tracking-body);
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 150ms ease;
}
.forgot_password > a:hover { opacity: 1; }

/* iOS "Sign In" pill button — keep configured color, refine type
   and tactile feedback. */
.login_signup_combo .login__ .btn {
    font-family: var(--pcnt-font-display);
    font-weight: 600;
    font-size: 17px;
    line-height: 52px;
    letter-spacing: var(--pcnt-tracking-body);
    border-radius: 14px;
    min-height: 52px;
    transition:
        background-color 180ms ease,
        transform 120ms cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 180ms ease;
    -webkit-tap-highlight-color: transparent;
}
.login_signup_combo .login__ .btn:active {
    transform: scale(0.985);
}

/* macOS-style social-login row: tighter, evenly spaced. */
.social_btns {
    margin: 36px 0 24px;
}
.social_btns p {
    font-family: var(--pcnt-font-system);
    font-size: 13px;
    letter-spacing: var(--pcnt-tracking-caption);
    opacity: 0.55;
    margin-bottom: 12px;
}
.social_btns a {
    margin: 4px 3px 0;
    transition: transform 150ms ease, box-shadow 150ms ease;
}
.social_btns a:hover { transform: translateY(-1px); }

/* Sign-up footer line. */
.signup__ {
    font-family: var(--pcnt-font-system);
    font-size: 14px;
    letter-spacing: var(--pcnt-tracking-body);
    opacity: 0.85;
}

/* macOS "remember device" checkbox label. */
.terms label {
    font-family: var(--pcnt-font-system);
    font-size: 14px;
    letter-spacing: var(--pcnt-tracking-body);
    opacity: 0.85;
}

/* Random users avatar strip: subtle ring like macOS user picker. */
.users-profiles .user-image {
    box-shadow: 0 0 0 2px var(--pcnt-avatar-ring, #ffffff),
                0 1px 3px rgba(0, 0, 0, 0.18);
}

/* Welcome footer caption. */
.welcome-footer {
    font-family: var(--pcnt-font-system);
    font-size: 12px;
    letter-spacing: var(--pcnt-tracking-caption);
    opacity: 0.8;
}

/* App-store badges row. */
.wo_side_apps p {
    font-family: var(--pcnt-font-system);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: var(--pcnt-tracking-caption);
    opacity: 0.7;
}

/* Welcome top bar (welcomeheader) — make the inline "Login" button
   feel like a macOS toolbar control. */
#welcomeheader {
    font-family: var(--pcnt-font-system);
}
#welcomeheader .mdbtn {
    font-family: var(--pcnt-font-display);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: var(--pcnt-tracking-body);
    border-radius: 10px;
    padding: 7px 16px;
    min-width: 0;
    transition:
        background-color 160ms ease,
        transform 120ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
#welcomeheader .mdbtn:active { transform: scale(0.97); }

/* Reduced-motion: honor the iOS / macOS accessibility setting. */
@media (prefers-reduced-motion: reduce) {
    .login_signup_combo .login__ .btn,
    #welcomeheader .mdbtn,
    .social_btns a,
    .wow_form_fields input,
    .wow_form_fields textarea,
    .wow_form_fields select {
        transition: none;
    }
    .login_signup_combo .login__ .btn:active,
    #welcomeheader .mdbtn:active {
        transform: none;
    }
}

/* Larger viewports: lift the login form sheet slightly, the way
   macOS centers a System Preferences sign-in panel. */
@media (min-width: 931px) {
    .login_innre {
        max-width: 460px;
        margin: 0 auto;
    }
}