/*
Theme Name: Yono Network
Theme URI: https://yononetwork.in
Author: Yono Network
Description: Mobile-first app directory theme. Includes an "Apps" custom post type with a New Apps tab, a customizable gradient banner, a one-click importer for the old JSON admin data, and full compatibility with Rank Math SEO.
Version: 1.0.0
Requires at least: 5.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yono-network
*/

/* =========================================================
   1. Variables
   ========================================================= */
:root {
    --yn-primary: #991B1B;
    --yn-secondary: #7A1515;
    --yn-dark: #450A0A;
    --yn-light: #F5F6F8;
    --yn-border: #E5E5E5;
    --yn-success: #2E8B57;
    --yn-red: #DC2626;
    --yn-text: #1e293b;
    --yn-muted: #64748b;

    --yn-hdr-h: 56px;
    --yn-nav-h: 40px;
    --adm: 0px; /* WordPress admin-bar offset, set below */

    /* Banner gradient colours (overridden from the Customizer via inline CSS) */
    --yn-b1: #000000;
    --yn-b2: #00ffff;
}

body.admin-bar { --adm: 32px; }
@media (max-width: 782px) { body.admin-bar { --adm: 46px; } }
@media (max-width: 600px) { body.admin-bar { --adm: 0px; } }

/* =========================================================
   2. Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: var(--yn-light);
    color: var(--yn-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--yn-primary); text-decoration: none; }
[hidden] { display: none !important; }

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background: #fff;
    clip: auto !important;
    clip-path: none;
    color: #000;
    display: block;
    font-size: 14px;
    height: auto;
    left: 5px;
    padding: 12px 20px;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.yn-container {
    width: 100%;
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
.yn-main { flex: 1; padding-top: 1.25rem; padding-bottom: 1.25rem; }

/* =========================================================
   3. Header + sub-nav + mobile menu
   ========================================================= */
.yn-header {
    position: sticky;
    top: var(--adm);
    z-index: 50;
    color: #fff;
    background: linear-gradient(135deg, var(--yn-primary) 0%, var(--yn-secondary) 55%, var(--yn-dark) 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
.yn-header-inner {
    height: var(--yn-hdr-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
/* Keep the header Join Us action visible on narrow mobile screens. */
.yn-brand { flex: 1 1 auto; min-width: 0; }
.yn-brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yn-header-telegram { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; flex: 0 0 auto !important; position: static !important; white-space: nowrap; }
.yn-menu-btn { flex: 0 0 40px; }
.yn-brand { display: flex; align-items: center; gap: .625rem; color: #fff; }
.yn-brand:hover { color: #fff; }
.yn-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.yn-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yn-brand-name { font-weight: 800; font-size: 1.125rem; letter-spacing: -.01em; line-height: 1; }

.yn-menu-btn {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background .15s;
}
.yn-menu-btn:hover { background: rgba(255, 255, 255, .15); }

.yn-header-telegram {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    flex: 0 0 auto; padding: .42rem .7rem; border-radius: 999px;
    color: #fff; background: #079bd7; font-size: .78rem; font-weight: 800;
    line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.18); white-space: nowrap;
}
.yn-header-telegram:hover { color: #fff; background: #087fb5; }
.yn-header-telegram i { font-size: 1.15rem; }


.yn-subnav {
    position: sticky;
    top: calc(var(--adm) + var(--yn-hdr-h));
    z-index: 40;
    background: var(--yn-light);
    border-bottom: 1px solid var(--yn-border);
}
.yn-subnav .yn-container { padding-left: .25rem; padding-right: .25rem; }
.yn-subnav-list {
    list-style: none;
    margin: 0;
    padding: 0 .25rem;
    height: var(--yn-nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}
.yn-subnav-list::-webkit-scrollbar { display: none; }
.yn-subnav-list li { margin: 0; }
.yn-subnav-list a {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .5rem;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--yn-secondary);
    transition: background .15s;
}
.yn-subnav-list a:hover { background: #fff; }
.yn-subnav-list a i { font-size: 9px; }
.yn-subnav-list .current-menu-item > a,
.yn-subnav-list .current_page_item > a,
.yn-subnav-list a[aria-current="page"] {
    background: linear-gradient(135deg, var(--yn-primary) 0%, #000 100%);
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}
@media (min-width: 768px) {
    .yn-subnav-list { justify-content: flex-start; gap: .5rem; }
    .yn-subnav-list a { font-size: .875rem; padding: .25rem .75rem; }
    .yn-subnav-list a i { font-size: .75rem; }
}

.yn-mobile-menu { position: fixed; top: var(--adm); right: 0; bottom: 0; left: 0; z-index: 100; }
.yn-mobile-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.yn-mobile-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 18rem;
    max-width: 85%;
    background: #fff;
    box-shadow: -8px 0 30px rgba(0, 0, 0, .25);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    overflow-y: auto;
}
.yn-mobile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.yn-mobile-title { font-weight: 800; font-size: 1.125rem; color: var(--yn-dark); }
.yn-mobile-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 1.125rem;
    cursor: pointer;
}
.yn-mobile-close:hover { background: var(--yn-light); }
.yn-mobile-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.yn-mobile-list a {
    display: block;
    padding: .625rem .75rem;
    border-radius: 8px;
    font-weight: 500;
    color: #334155;
}
.yn-mobile-list a:hover { background: var(--yn-light); }
.yn-mobile-list a i { width: 1.25rem; color: var(--yn-secondary); }

/* =========================================================
   4. Ticker + banner
   ========================================================= */
.yn-ticker {
    margin: 0 -1rem 1rem;
    overflow: hidden;
    background: var(--yn-dark);
    color: #fff;
    font-size: .75rem;
    font-weight: 500;
}
.yn-ticker-track { display: flex; width: max-content; padding: .5rem 0; animation: yn-scroll 26s linear infinite; }
.yn-ticker-track:hover { animation-play-state: paused; }
.yn-ticker-group { display: flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem; white-space: nowrap; }
@keyframes yn-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 640px) {
    .yn-ticker { margin-left: 0; margin-right: 0; border-radius: 1rem; font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) { .yn-ticker-track { animation: none; } }

/* Gradient text banner (black -> cyan), matches the reference screenshot */
.yn-banner {
    margin-bottom: 1rem;
    padding: 1.125rem 1.25rem;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(135deg, var(--yn-b1) 0%, var(--yn-b2) 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.yn-banner p { margin: 0; color: #fff; font-size: .9375rem; line-height: 1.55; font-weight: 500; }
@media (min-width: 640px) {
    .yn-banner { padding: 1.75rem 2rem; border-radius: 28px; }
    .yn-banner p { font-size: 1.0625rem; }
}

/* =========================================================
   5. Tabs + app cards
   ========================================================= */
.yn-tabs {
    position: sticky;
    top: calc(var(--adm) + var(--yn-hdr-h) + var(--yn-nav-h));
    z-index: 30;
    display: flex;
    background: #fff;
    border: 1px solid var(--yn-border);
    border-radius: 16px;
    padding: 4px;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.yn-tab-btn {
    flex: 1;
    padding: .625rem;
    border: 0;
    border-radius: 12px;
    background: transparent;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 700;
    color: var(--yn-secondary);
    cursor: pointer;
    transition: all .15s;
}

.yn-app-search {
    position: relative; display: flex; align-items: center; width: 100%;
    margin: 0 0 1rem; border: 2px solid #f4cbd0; border-radius: 999px;
    background: #fff; min-height: 54px; box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.yn-app-search input {
    display: block; width: 100%; min-width: 0; border: 0; outline: 0;
    background: transparent; color: var(--yn-text, #333); padding: .8rem 3.2rem .8rem 1.15rem;
    border-radius: 999px; font: inherit; font-size: 1rem; box-shadow: none;
}
.yn-app-search input::placeholder { color: #98545b; opacity: 1; }
.yn-search-icon { position: absolute; right: 1.1rem; color: #e60023; font-size: 1.2rem; pointer-events: none; }
.yn-search-empty { display: none; padding: 1rem; text-align: center; color: #8b2633; }
.yn-search-empty.is-visible { display: block; }
@media (max-width: 420px) {
    .yn-header-telegram { padding: .38rem .55rem; font-size: .7rem; }
    .yn-header-telegram i { font-size: 1rem; }
    .yn-brand-name { font-size: 1rem; }
}

.yn-tab-btn.is-active {
    background: linear-gradient(135deg, var(--yn-primary) 0%, #000 100%);
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}

.yn-list { display: flex; flex-direction: column; gap: .625rem; }

.yn-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    background: #fff;
    border: 1px solid var(--yn-border);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    color: inherit;
    transition: box-shadow .2s, border-color .2s, transform .15s;
}
.yn-card:hover {
    color: inherit;
    box-shadow: 0 8px 24px rgba(153, 27, 27, .16);
    border-color: rgba(153, 27, 27, .35);
    transform: translateY(-1px);
}
.yn-card-icon { position: relative; flex-shrink: 0; }
.yn-rank {
    position: absolute;
    top: -8px;
    left: -8px;
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--yn-primary), var(--yn-dark));
    color: #fff;
    border: 2px solid #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.yn-icon {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid var(--yn-border);
    background: #fff;
}
.yn-icon-lg { width: 96px; height: 96px; border-radius: 20px; }
.yn-icon-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--yn-primary), var(--yn-dark));
    color: #fff;
    font-weight: 800;
    font-size: 1.125rem;
    border: 0;
}
.yn-icon-lg.yn-icon-fallback { font-size: 1.75rem; }

.yn-card-body { flex: 1; min-width: 0; }
.yn-card-title {
    font-weight: 700;
    font-size: .875rem;
    color: var(--yn-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.yn-line { font-size: .75rem; font-weight: 600; margin-top: 2px; }
.yn-line-bonus { color: var(--yn-red); }
.yn-line-with { color: var(--yn-success); }

/* Glossy gradient button (cards + CTAs) */
.yn-dl, .yn-btn {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(180deg, var(--yn-primary) 0%, var(--yn-secondary) 100%);
    box-shadow: 0 4px 14px rgba(153, 27, 27, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: filter .2s, transform .15s;
}
.yn-dl::before, .yn-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 55%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0));
    border-radius: inherit;
    pointer-events: none;
}
.yn-dl:hover, .yn-btn:hover { filter: brightness(1.08); color: #fff; }
.yn-dl:active, .yn-btn:active { transform: scale(.98); }
.yn-dl {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem .75rem;
    border-radius: 12px;
    font-size: .75rem;
    font-weight: 600;
}

.yn-empty { text-align: center; color: #94a3b8; font-size: .875rem; padding: 2.5rem 0; }
.yn-empty i { display: block; font-size: 1.875rem; margin-bottom: .5rem; }

/* =========================================================
   6. Single app page
   ========================================================= */
.yn-back { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: #64748b; margin-bottom: 1rem; }
.yn-back:hover { color: var(--yn-primary); }
.rank-math-breadcrumb { font-size: .8125rem; color: var(--yn-muted); margin-bottom: .75rem; }
.rank-math-breadcrumb a { color: var(--yn-muted); }
.rank-math-breadcrumb p { margin: 0; }

.yn-app-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 1.25rem; }
.yn-app-head .yn-icon { box-shadow: 0 1px 3px rgba(0, 0, 0, .1); margin-bottom: .75rem; }
.yn-app-title { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--yn-dark); }
.yn-badge {
    display: inline-block;
    margin-top: .5rem;
    padding: .25rem .625rem;
    border-radius: 999px;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

.yn-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: 1.5rem; }
.yn-stat {
    padding: .75rem .25rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--yn-border);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}
.yn-stat-value { font-size: .875rem; font-weight: 700; color: #334155; overflow-wrap: anywhere; }
.yn-stat-label { font-size: 10px; color: #94a3b8; margin-top: .25rem; }
.yn-stat-rating { color: #f59e0b; }
.yn-stat-bonus { color: var(--yn-red); }

.yn-cta { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; }
.yn-btn-lg {
    display: block;
    width: 100%;
    padding: .875rem 1rem;
    text-align: center;
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 700;
}
.yn-btn-disabled { background: #cbd5e1; box-shadow: none; cursor: not-allowed; }
.yn-btn-disabled::before { display: none; }

.yn-strip {
    margin-bottom: 2rem;
    padding: .75rem;
    background: #fff;
    border: 1px solid var(--yn-border);
    border-radius: 16px;
    font-size: .75rem;
    color: var(--yn-muted);
}
.yn-strip .is-bonus { color: var(--yn-red); font-weight: 600; }
.yn-strip .is-with { color: var(--yn-success); font-weight: 600; }

.yn-section-title { margin: 0 0 .75rem; font-size: 1rem; font-weight: 800; color: var(--yn-dark); }
.yn-related { margin-top: 2rem; }

/* =========================================================
   7. Home content boxes
   ========================================================= */
.yn-box {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--yn-border);
    border-radius: 16px;
}
.yn-box h2 { margin: 0 0 .75rem; font-size: 1rem; font-weight: 800; color: var(--yn-dark); }
.yn-box h3 { margin: 0 0 .25rem; font-size: 1rem; font-weight: 700; color: var(--yn-dark); }
.yn-box p { margin: 0 0 .75rem; font-size: .875rem; color: #475569; }
.yn-box ul { margin: 0; padding-left: 1.25rem; font-size: .875rem; color: #475569; }
.yn-box li { margin-bottom: .5rem; }
.yn-box-lead { font-size: 1.125rem !important; font-weight: 800; color: var(--yn-dark) !important; }
.yn-featured { display: flex; flex-direction: column; gap: 1rem; }
.yn-featured .yn-box { margin-top: 0; }
.yn-tagcloud { font-size: .875rem; line-height: 1.75; }
.yn-tagcloud a:hover { text-decoration: underline; }
.yn-grid-2 { display: grid; grid-template-columns: 1fr; gap: .75rem; font-size: .875rem; }
@media (min-width: 640px) { .yn-grid-2 { grid-template-columns: 1fr 1fr; } }
.yn-grid-2 > div { border: 1px solid var(--yn-border); border-radius: 12px; padding: .75rem; }
.yn-grid-2 strong { display: block; color: var(--yn-dark); margin-bottom: .25rem; }
.yn-grid-2 p { margin: 0; }
.yn-faq dt { font-weight: 700; color: var(--yn-dark); font-size: .875rem; }
.yn-faq dd { margin: 0 0 1rem; font-size: .875rem; color: #475569; }

/* =========================================================
   8. Pages (About / Contact / Disclaimer ...)
   ========================================================= */
.yn-page-head { text-align: center; margin-bottom: 2rem; }
.yn-page-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: .75rem;
    border-radius: 16px;
    background: rgba(153, 27, 27, .1);
    color: var(--yn-primary);
    font-size: 1.5rem;
}
.yn-page-icon.is-warning { background: #fef3c7; color: #d97706; }
.yn-page-title { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--yn-dark); }

.entry-content { color: #475569; font-size: .9375rem; line-height: 1.7; }
.entry-content h2 { margin: 1.5rem 0 .375rem; font-size: 1rem; font-weight: 700; color: var(--yn-text); }
.entry-content h3 { margin: 1.25rem 0 .375rem; font-size: .9375rem; font-weight: 700; color: var(--yn-text); }
.entry-content p { margin: 0 0 1rem; }
.entry-content ul, .entry-content ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.entry-content a { text-decoration: underline; }
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--yn-border);
    font-size: .875rem;
}
.entry-content td, .entry-content th { padding: .75rem 1rem; border-top: 1px solid var(--yn-border); text-align: left; }
.entry-content tr:first-child td, .entry-content tr:first-child th { border-top: 0; }
.entry-content td:first-child { font-weight: 600; color: #334155; width: 35%; }
.yn-app-about { margin-top: 0; margin-bottom: 1.5rem; }

/* =========================================================
   9. Footer
   ========================================================= */
.yn-footer { padding-bottom: 1.5rem; }
.yn-notice {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: 1rem;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 12px;
    color: #78350f;
    font-size: .75rem;
    line-height: 1.6;
}
.yn-notice > i { color: #f59e0b; font-size: 1.125rem; margin-top: .125rem; }
.yn-notice p { margin: 0; }
@media (min-width: 640px) { .yn-notice { font-size: .875rem; } }
.yn-copy {
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--yn-border);
    text-align: center;
    font-size: .75rem;
    color: #94a3b8;
}

/* 404 + generic posts */
.yn-article { margin-bottom: 1rem; }
.yn-article h2 a { color: var(--yn-dark); }
.navigation.pagination { margin-top: 1.5rem; text-align: center; }
.navigation.pagination .page-numbers { display: inline-block; padding: .375rem .75rem; margin: 0 .125rem; border-radius: 8px; background: #fff; border: 1px solid var(--yn-border); }
.navigation.pagination .current { background: var(--yn-primary); color: #fff; border-color: var(--yn-primary); }

/* WordPress core alignment helpers */
.alignleft { float: left; margin: 0 1rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: .8125rem; color: var(--yn-muted); }


/* Global Telegram bonus button shown beneath the app download button. */
.yn-telegram-cta{margin:10px 0 24px}
.yn-telegram-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:88px;box-sizing:border-box;padding:18px 22px;border:4px solid #a90018;border-radius:42px;background:#fff;color:#920018;text-align:center;text-decoration:none;font-size:clamp(19px,3vw,30px);font-weight:800;line-height:1.25;transition:background .2s,color .2s,transform .2s}
.yn-telegram-btn:hover,.yn-telegram-btn:focus{background:#a90018;color:#fff;transform:translateY(-1px)}
.yn-telegram-btn i{font-size:1.15em}
@media(max-width:600px){.yn-telegram-btn{min-height:76px;padding:14px 16px;border-width:3px;border-radius:32px;font-size:20px}}


/* Final mobile viewport lock: prevent page scaling and layout overflow. */
html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body, body.yn-body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe, table { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }
@media (max-width: 767px) {
    input, select, textarea { font-size: 16px !important; }
    .yn-container { width: 100%; max-width: 100%; }
    .yn-card, .yn-tabs, .yn-banner, .yn-telegram-btn {
        min-width: 0;
        max-width: 100%;
    }
    .yn-tab-btn { min-width: 0; overflow-wrap: anywhere; }
}


/* Force the header Join Us link to remain visible on every template, including single app preview pages. */
.yn-header .yn-header-inner > a.yn-header-telegram,
body.single-yono_app .yn-header .yn-header-inner > a.yn-header-telegram {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 60 !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}
.yn-header .yn-header-inner { min-width: 0; }
.yn-header .yn-brand { min-width: 0; flex: 1 1 0%; }
.yn-header .yn-menu-btn { flex: 0 0 40px; }
@media (max-width: 600px) {
    .yn-header .yn-header-inner > a.yn-header-telegram { padding: .38rem .5rem !important; font-size: .7rem !important; }
    .yn-header .yn-brand-name { overflow: hidden; text-overflow: ellipsis; }
}