:root {
    --color-primary-rgb: 15, 118, 200;
    --color-primary: #4fb0ff;
    --color-primary-dark: #0a4a8a;
    --color-bg: #000000;
    --color-surface: #0a0a0a;
}

html {
    direction: rtl;
}

body {
    direction: ltr;
}

body > * {
    direction: rtl;
}

body {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) var(--color-surface);
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-surface);
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-dark);
}

::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

@media (max-width: 767px) {
    body {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    ::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
}

/* ===== Header / Navbar ===== */
header {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(25px) saturate(1.8);
    /* Border + glow follow each page's palette via the vars its own CSS defines */
    border: 1px solid rgba(var(--color-primary-rgb), 0.32);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 28px rgba(var(--color-primary-rgb), 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    margin: 1rem;
    border-radius: 20px;
}

@media (max-width: 321px) {
    header {
        margin: 1rem 2rem;
    }
    .logo-name {
        display: none;
    }
    #header-logo-mobile {
        display: none;
    }
}

@media (max-width: 426px) {
    header {
        margin: 1rem 2rem;
    }
    .logo-name {
        display: none;
    }
    #header-logo-mobile {
        height: 3.75rem;
    }
}

@media (min-width: 768px) {
    header {
        margin: 1rem 2rem;
    }
}

@media (min-width: 1024px) {
    header {
        margin: 1rem 2rem;
    }
}

@media (min-width: 1280px) {
    header {
        margin: 1rem 7rem;
    }
}

/* ===== Header grow (first 100vh) / shrink+stick (scrolled past it) =====
   .header-shrink is toggled by public.js based on window.scrollY vs
   window.innerHeight. #header-inner/#header-logo-* are stable ids added
   directly in each page's HTML (not just Tailwind's own h-20/h-24 utility
   classes) specifically so these overrides don't depend on guessing/
   matching Tailwind's generated class names. transition-all on <header>
   itself (see the inline "transition-all duration-300" Tailwind class in
   every page's markup) only ever affects <header>'s own properties - each
   child needs its own transition declared here to animate too. */
#header.header-shrink {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

#header-inner {
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#header.header-shrink #header-inner {
    height: 3.75rem;
}

@media (min-width: 1280px) {
    #header.header-shrink #header-inner {
        height: 4.25rem;
    }
}

#header-logo-desktop,
#header-logo-mobile {
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#header.header-shrink #header-logo-desktop {
    height: 4rem;
    transform: scale(1.05);
}

#header.header-shrink #header-logo-mobile {
    height: 2.75rem;
    transform: scale(1);
}

.nav-link {
    position: relative;
    transition: color 0.3s;
    color: white;
}

.nav-links-container:hover .nav-link:not(:hover),
nav:hover .nav-link:not(:hover) {
    color: #9ca3af;
    opacity: 50%;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    right: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: none;
}

/* ===== Desktop Dropdown ===== */
.dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(0, 0, 0, 1) !important;
    border: 1px solid rgba(var(--color-primary-rgb), 0.25) !important;
}

.dropdown-parent:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(5px);
}

.dropdown a {
    transition: all 0.2s;
    position: relative;
}

.dropdown a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.5), rgba(var(--color-primary-rgb), 0));
    border-radius: 0.5rem;
    opacity: 0;
    width: 3%;
    transition: opacity 0.2s;
}

.dropdown a:hover::before {
    opacity: 1;
}

.dropdown a:hover {
    color: var(--color-primary) !important;
    transform: translateX(-4px);
    background: rgb(10, 10, 10);
}

/* ===== Rich dropdown items (icon + title + description) - نav's
   "خدمات گیمینگ"/"سرور مجازی" dropdowns. Opts out of the plain-link
   slide+gradient treatment above (.dropdown a/.dropdown a::before) with its
   own !important overrides, same technique .gvps-profile-menu already uses
   for the same reason - .dropdown-item is still an <a> inside .dropdown, so
   without these it would inherit both treatments at once. */
.dropdown-item {
    display: flex !important;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.65rem !important;
    border-radius: 0.75rem;
    transition: background 0.2s ease !important;
}

.dropdown-item::before {
    display: none !important;
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: inherit !important;
    transform: none !important;
}

.dropdown-item-disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.dropdown-item-disabled:hover {
    background: transparent !important;
}

.dropdown-item-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-primary-rgb), 0.1);
    border: 1px solid rgba(var(--color-primary-rgb), 0.2);
    color: var(--color-primary);
    transition: all 0.2s ease;
}

.dropdown-item-icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.dropdown-item:hover .dropdown-item-icon {
    background: rgba(var(--color-primary-rgb), 0.22);
    border-color: rgba(var(--color-primary-rgb), 0.45);
}

.dropdown-item-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.dropdown-item-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.dropdown-item-desc {
    font-size: 0.71rem;
    color: #9ca3af;
    line-height: 1.4;
}

.gvps-profile-menu a:hover {
    color: #60a5fa !important;
    background: rgba(31, 41, 55, 0.5) !important;
    transform: none !important;
}

.gvps-profile-menu a:hover::before {
    opacity: 0 !important;
}

/* ===== Mobile Menu Drawer =====
   Enhanced here (not per-page HTML) since .mobile-menu/.mobile-dropdown-btn/
   nav > a is already an identical DOM shape on every page that loads this
   stylesheet - editing this file once reaches all 17 pages instantly. */
.mobile-menu {
    /* calc(100% + 40px) instead of a bare 100% - a flat extra buffer beyond
       "one full box width" guarantees zero sliver is ever visible in the
       closed state, regardless of any subpixel rounding or viewport-vs-
       layout-width discrepancy (the reported "part of it visible below
       laptop width" symptom). */
    transform: translateX(calc(100% + 40px));
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background:
        radial-gradient(ellipse 480px 320px at 100% 0%, rgba(var(--color-primary-rgb), 0.16), transparent 60%),
        radial-gradient(ellipse 420px 300px at 0% 100%, rgba(var(--color-primary-rgb), 0.1), transparent 65%);
}

.mobile-menu.open {
    transform: translateX(0);
}

.mobile-menu nav {
    gap: 0.35rem !important;
}

.mobile-menu nav > a:not(.btn-primary),
.mobile-menu nav > div > button.mobile-dropdown-btn {
    padding: 0.7rem 0.9rem;
    border-radius: 0.85rem;
    transition: background 0.25s ease, color 0.25s ease, padding-right 0.25s ease;
}

.mobile-menu nav > a:not(.btn-primary):hover,
.mobile-menu nav > a:not(.btn-primary):active,
.mobile-menu nav > div > button.mobile-dropdown-btn:hover {
    background: rgba(var(--color-primary-rgb), 0.1);
    padding-right: 1.15rem;
}

.mobile-menu nav > a:not(.btn-primary):not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-menu nav > div > button.mobile-dropdown-btn {
    width: 100%;
    justify-content: space-between;
}

#menu-close {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

#menu-close:hover {
    background: rgba(var(--color-primary-rgb), 0.14);
    border-color: rgba(var(--color-primary-rgb), 0.4);
    transform: rotate(90deg);
}

/* Staggered slide-in for each top-level nav item once the drawer opens -
   purely decorative, driven by nth-child so it needs no JS/markup change. */
.mobile-menu nav > * {
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    transition-delay: 0s;
}

.mobile-menu.open nav > * {
    opacity: 1;
    transform: translateX(0);
}

.mobile-menu.open nav > *:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu.open nav > *:nth-child(2) { transition-delay: 0.1s; }
.mobile-menu.open nav > *:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu.open nav > *:nth-child(4) { transition-delay: 0.2s; }
.mobile-menu.open nav > *:nth-child(5) { transition-delay: 0.25s; }
.mobile-menu.open nav > *:nth-child(6) { transition-delay: 0.3s; }
.mobile-menu.open nav > *:nth-child(7) { transition-delay: 0.35s; }

.mobile-dropdown {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-dropdown.open {
    grid-template-rows: 1fr;
}

.mobile-dropdown-inner {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.3s ease;
}

.mobile-dropdown.open .mobile-dropdown-inner {
    opacity: 1;
    transform: translateY(0);
}

.mobile-dropdown-inner a {
    padding: 0.4rem 0.6rem;
    border-radius: 0.6rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.mobile-dropdown-inner a:hover {
    background: rgba(var(--color-primary-rgb), 0.08);
}

/* ===== "please log in" modal (authHeader.js -> window.GVPS_AUTH.requireLogin) ===== */
.gvps-auth-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.gvps-auth-modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.gvps-auth-modal-box {
    background: rgb(10, 10, 12);
    border: 1px solid rgba(var(--color-primary-rgb), 0.25);
    border-radius: 1.5rem;
    max-width: 26rem;
    width: 100%;
    padding: 2rem 1.75rem 1.75rem;
    text-align: center;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.3s ease;
}

.gvps-auth-modal-overlay.open .gvps-auth-modal-box {
    transform: translateY(0) scale(1);
}

.gvps-auth-modal-icon {
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: rgba(var(--color-primary-rgb), 0.12);
    border: 1px solid rgba(var(--color-primary-rgb), 0.3);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gvps-auth-modal-icon svg {
    width: 1.6rem;
    height: 1.6rem;
}

.gvps-auth-modal-box h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.5rem;
}

.gvps-auth-modal-box p {
    font-size: 0.85rem;
    color: #9ca3af;
    line-height: 1.9;
    margin-bottom: 1.5rem;
}

.gvps-auth-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.gvps-auth-modal-actions a,
.gvps-auth-modal-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    transition: all 0.2s ease;
}

.gvps-auth-modal-actions a:not(.btn-primary) {
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e5e7eb;
}

.gvps-auth-modal-actions a:not(.btn-primary):hover {
    border-color: rgba(var(--color-primary-rgb), 0.4);
    color: var(--color-primary);
}

.gvps-auth-modal-actions button {
    background: none;
    border: none;
    color: #6b7280;
    font-weight: 600;
}

.gvps-auth-modal-actions button:hover {
    color: #9ca3af;
}

/* ===== Site-wide toast (authHeader.js - "شما پیام جدید دارید") =====
   A distinct class from the per-page #toast/.toast element (basket.css,
   favorites.css, dashboard.css, details.css) - authHeader.js runs on pages
   that don't define that element at all, so it needs its own. */
.gvps-site-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgb(15, 15, 17);
    border: 1px solid rgba(var(--color-primary-rgb), 0.35);
    color: var(--color-primary);
    padding: 0.85rem 1.5rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 200;
}

.gvps-site-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.gvps-site-toast svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ===== Announcements (authHeader.js - "اعلانات" item in the profile
   dropdown) ===== */
.gvps-announce-badge {
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.25rem;
    border-radius: 9999px;
    background: #38bdf8;
    color: #000;
    font-size: 0.65rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

/* Overlay badge on the basket icon (desktop nav + the static basket/details/
   favorites markup). Written as real CSS instead of Tailwind's -top-*/-right-*
   utilities: this project's tailwind.css is a statically pre-built, purged
   bundle containing only the utility classes that existed in the source at
   build time - "-right-1.5" was never used anywhere before, so it was never
   compiled in and silently does nothing when added to markup later. */
.cart-badge-overlay {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    border: 2px solid #000;
    z-index: 1;
}

/* Combined "you have something new" dot on the profile avatar itself
   (top-right corner of the button, physical position - unaffected by the
   page's dir="rtl" since top/right are physical, not logical, properties) -
   sum of unseen announcements + unread messages, see
   authHeader.js's updateAvatarBadge(). */
.gvps-avatar-badge {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    border-radius: 9999px;
    background: #38bdf8;
    color: #000;
    font-size: 0.6rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid #000;
    z-index: 1;
}

.gvps-announce-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.gvps-announce-modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.gvps-announce-modal-box {
    background: rgb(10, 10, 12);
    border: 1px solid rgba(var(--color-primary-rgb), 0.25);
    border-radius: 1.5rem;
    max-width: 30rem;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    position: relative;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.3s ease;
}

.gvps-announce-modal-overlay.open .gvps-announce-modal-box {
    transform: translateY(0) scale(1);
}

.gvps-announce-modal-close {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
    font-size: 1.2rem;
    line-height: 1;
}

.gvps-announce-modal-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.gvps-announce-modal-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

.gvps-announce-modal-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(var(--color-primary-rgb), 0.12);
    border: 1px solid rgba(var(--color-primary-rgb), 0.3);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gvps-announce-modal-icon svg {
    width: 1.4rem;
    height: 1.4rem;
}

.gvps-announce-modal-header h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
}

.gvps-announce-modal-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gvps-announce-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.9rem;
    padding: 1rem 1.1rem;
}

.gvps-announce-item-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.gvps-announce-item-top h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
}

.gvps-announce-item-top span {
    font-size: 0.7rem;
    color: #6b7280;
    flex-shrink: 0;
    white-space: nowrap;
}

.gvps-announce-item p {
    font-size: 0.8rem;
    color: #9ca3af;
    line-height: 1.8;
}

.gvps-announce-empty {
    text-align: center;
    color: #6b7280;
    font-size: 0.85rem;
    padding: 2rem 0;
}

/* ===== Categorized-plan UI (vps-server.html + vds-server.html via
   planCatalog.js, and details.html for the same product's full page) - kept
   here (not a page-specific stylesheet) because details.html needs it too
   and doesn't load vps-server.css/vds-server.css. ===== */

/* Category filter dropdown - click-toggled (not hover, unlike the nav
   dropdowns) since this is a real filter the visitor needs time to read
   through, not a navigation shortcut that should close on cursor drift. */
.vps-cat-dropdown .dropdown {
    opacity: 0;
    visibility: hidden;
    /* translateX(50%) is the other half of the "right:50%; translate-x-1/2"
       Tailwind centering trick on the element itself (see vps-server.html/
       vds-server.html) - transform is a single property, so this rule
       overriding it with translateY alone was silently cancelling the
       horizontal centering and pushing the panel off-screen to the left on
       every viewport, closed or open. Both axes must be combined here. */
    transform: translateX(50%) translateY(15px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(0, 0, 0, 1) !important;
    border: 1px solid rgba(var(--color-primary-rgb), 0.25) !important;
    max-height: 60vh;
    overflow-y: auto;
}

.vps-cat-dropdown .dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateX(50%) translateY(5px);
}

.vps-cat-dropdown-trigger-open i {
    transform: rotate(180deg);
}

.vps-cat-option {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border-radius: 0.65rem;
    text-align: right;
    transition: background 0.2s ease;
    color: rgba(255, 255, 255, 0.85);
}

.vps-cat-option:hover {
    background: rgba(255, 255, 255, 0.06);
}

.vps-cat-option.active {
    background: rgba(255, 255, 255, 0.08);
}

.vps-cat-option .vps-cat-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    flex-shrink: 0;
    box-shadow: 0 0 8px 1px currentColor;
}

.vps-cat-option .vps-cat-option-label {
    font-size: 0.82rem;
    line-height: 1.5;
    flex: 1;
}

/* Plan card teaser specs - each its own soft rounded row instead of a plain
   divider line, so the card reads as a small stat list rather than bare text. */
.plan-teaser-spec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    padding: 0.55rem 0.8rem;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.plan-teaser-spec + .plan-teaser-spec {
    margin-top: 0.4rem;
}

.plan-teaser-spec span:last-child {
    color: #fff;
    font-weight: 700;
}

/* Category/backup badges - a bordered pill (border uses currentColor, so it
   always matches whatever color the badge was given inline) rather than a
   flat, low-contrast block. Used on plan cards AND on details.html's
   vps/vds extras box - this is exactly why it lives in public.css instead
   of a page-specific stylesheet (details.html was missing this rule
   entirely before, which is why those badges rendered with no
   padding/radius there). */
.plan-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.45rem 0.9rem;
    border-radius: 9999px;
    line-height: 1.3;
    border: 1px solid currentColor;
    /* NOT nowrap: the top-of-card badge holds the full category label (can be
       long, e.g. "سرور های مجازی ابری با پردازنده AMD Ryzen 9 9950X") and
       must wrap on narrow viewports - nowrap here was forcing the card, and
       the whole page, to overflow horizontally on mobile/tablet. Short
       badges (۱ اسلات بک‌آپ, پشتیبان‌گیری) never needed nowrap since they
       already fit on one line and live in a flex-wrap row that moves the
       whole pill to a new line instead of breaking its text. */
    white-space: normal;
    max-width: 100%;
}

.plan-more-info-hint {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

/* Billing-duration pricing option cards on details.html (see renderVpsExtras
   in details.js) - clickable, single-select. Border/background colors are
   set inline per product accent (both at rest and on select); this class
   only owns the shape, cursor, and the hover/selected motion. */
.plan-pricing-option {
    display: block;
    width: 100%;
    border-width: 1px;
    border-style: solid;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.plan-pricing-option:hover {
    transform: translateY(-2px);
}

.plan-pricing-option.selected {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 10px 22px -10px rgba(0, 0, 0, 0.6);
}


.plan-details-btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.plan-details-btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.15);
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6);
}

/* ===== Trust seals (eNamad + Zarinpal) - footer bottom bar, sits between
   the social icons and the copyright line. Just the bare logos - no card
   background/border/glow around them - grayscale by default, real color +
   a small lift on hover is the only affordance. */
.gvps-trust-seals {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.gvps-trust-seal-item {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.gvps-trust-seal-item:hover {
    transform: translateY(-4px);
}

.gvps-trust-seal-item img {
    display: block;
    height: 58px;
    width: auto;
    border-radius: 0.5rem;
    /* Monochrome by default, real color only on hover - see
       .gvps-trust-seal-item:hover below. brightness+contrast on top of the
       grayscale is what keeps it reading as a clean white/black badge
       instead of a muddy gray one. */
    filter: grayscale(1) brightness(1.7) contrast(0.85);
    transition: filter 0.3s ease;
}

.gvps-trust-seal-item:hover img {
    filter: none;
}

/* Fallback footprint while Zarinpal's script (which document.write()s its
   own badge markup into this element) is still loading or blocked - avoids
   a footer layout jump once it resolves. */
.gvps-trust-seal-zarinpal {
    min-width: 58px;
    min-height: 58px;
}

/* Zarinpal's own documented markup/sizing convention (#zarinpal wrapper,
   sized via width on the img it injects rather than height like eNamad's) -
   see https://www.zarinpal.com/webservice/TrustCode's own example. */
#zarinpal {
    margin: auto;
}

#zarinpal img {
    width: 80px;
    height: auto;
    max-height: 58px;
    object-fit: contain;
}

::selection {
  color: black;
  background: #4fb0ff;
}

/* ================= Scroll-triggered reveal animations =================
   Shared by every page that loads this stylesheet - see
   Assets/JS/scrollReveal.js's IntersectionObserver, which toggles .in-view
   BOTH ways (added on enter, removed on exit), unlike a typical one-shot
   "reveal on scroll" library - this is what makes the animation replay
   every time an element re-enters the viewport (scroll down, up, down
   again). Each data-reveal value is a genuinely distinct motion, not a
   repeated generic fade - pick deliberately per element, not by default. */
[data-reveal] {
    opacity: 0;
    transition: opacity 0.7s ease var(--reveal-delay, 0s), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s), filter 0.7s ease var(--reveal-delay, 0s);
    will-change: transform, opacity;
}

[data-reveal="fade-up"] {
    transform: translateY(36px);
}

[data-reveal="slide-right"] {
    transform: translateX(-70px);
}

[data-reveal="slide-left"] {
    transform: translateX(70px) rotate(-3deg);
}

[data-reveal="zoom-in"] {
    transform: scale(0.72);
}

[data-reveal="pop"] {
    transform: scale(0.82) translateY(14px);
}

[data-reveal="flip-up"] {
    transform: perspective(900px) rotateX(45deg) translateY(24px);
    transform-origin: top center;
}

[data-reveal="rotate-in"] {
    transform: rotate(-9deg) scale(0.88);
}

[data-reveal="blur-in"] {
    transform: translateY(18px);
    filter: blur(10px);
}

[data-reveal].in-view {
    opacity: 1;
    transform: none;
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* Group dividers on the homepage services grid, separating VPS/VDS hosting
   from Minecraft dev services (map/plugin/gamemode/resourcepack) so they
   don't read as one undifferentiated offering. grid-column: 1 / -1 makes
   these span the full grid width regardless of column count. */
.gvps-service-divider {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: -0.5rem;
}

.gvps-service-divider-spaced {
    margin-top: 0.5rem;
}

.gvps-service-divider-line {
    height: 1px;
    flex: 1;
    background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.16), transparent);
}

.gvps-service-divider-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.gvps-service-divider-title-accent {
    color: #60a5fa;
    font-weight: 500;
    font-size: 0.85rem;
}

.gvps-service-divider-sub {
    grid-column: 1 / -1;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    margin-top: -0.5rem;
    margin-bottom: 0.5rem;
}

/* ========| Footer Contact Info (phone + office address) |======== */
.footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.footer-contact-line {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.6;
}

.footer-contact-line svg {
    margin-top: 0.15rem;
    color: #60a5fa;
}

.footer-contact-link {
    transition: color 0.2s ease;
}

.footer-contact-link:hover {
    color: #60a5fa;
}

/* ========| VPN / Outside-Iran Sticky Warning Button |======== */
.gvps-vpn-alert {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 70;
    max-width: min(92vw, 320px);
}

.gvps-vpn-alert-box {
    position: relative;
    background: rgba(250, 204, 21, 0.1);
    border: 1px solid rgba(250, 204, 21, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 0.45rem;
    width: 3.1rem;
    max-height: 3.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.3s cubic-bezier(.4, 0, .2, 1), max-height 0.3s cubic-bezier(.4, 0, .2, 1), padding 0.3s ease;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.gvps-vpn-alert-box.open {
    width: min(300px, 88vw);
    max-height: 420px;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    align-items: stretch;
    flex-direction: column;
}

.gvps-vpn-alert-badge {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    border-radius: 9999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000;
    line-height: 1;
    z-index: 1;
}

.gvps-vpn-alert-badge.hidden {
    display: none;
}

.gvps-vpn-alert-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: none;
    background: none;
    cursor: pointer;
    color: #facc15;
    flex-shrink: 0;
    padding: 0;
}

.gvps-vpn-alert-box.open .gvps-vpn-alert-trigger {
    display: none;
}

.gvps-vpn-alert-icon {
    width: 1.4rem;
    height: 1.4rem;
    display: block;
    transform-origin: 50% 50%;
    animation: gvps-vpn-shake 2.2s ease-in-out infinite;
}

@keyframes gvps-vpn-shake {
    0% {
        transform: rotate(0deg);
    }

    4% {
        transform: rotate(-14deg);
    }

    8% {
        transform: rotate(12deg);
    }

    12% {
        transform: rotate(-10deg);
    }

    16% {
        transform: rotate(8deg);
    }

    20% {
        transform: rotate(-4deg);
    }

    24% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.gvps-vpn-alert-panel {
    display: none;
    flex-direction: column;
    gap: 0.65rem;
}

.gvps-vpn-alert-box.open .gvps-vpn-alert-panel {
    display: flex;
    animation: gvps-vpn-pop 0.25s ease;
}

@keyframes gvps-vpn-pop {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.gvps-vpn-alert-panel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.85rem;
    color: #fde047;
}

.gvps-vpn-alert-panel-header svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.gvps-vpn-alert-close {
    margin-inline-start: auto;
    background: none;
    border: none;
    color: #fde047;
    cursor: pointer;
    padding: 0.2rem;
    display: flex;
    align-items: center;
}

.gvps-vpn-alert-text {
    font-size: 0.78rem;
    line-height: 1.65;
    color: rgba(254, 249, 195, 0.8);
    margin: 0;
}

.gvps-vpn-alert-hide-forever {
    align-self: flex-start;
    background: rgba(250, 204, 21, 0.14);
    border: 1px solid rgba(250, 204, 21, 0.4);
    color: #fde047;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.35rem 0.8rem;
    border-radius: 0.55rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.gvps-vpn-alert-hide-forever:hover {
    background: rgba(250, 204, 21, 0.26);
}

@media (prefers-reduced-motion: reduce) {
    .gvps-vpn-alert-icon {
        animation: none;
    }
}