/*
Theme Name: Apple VPN Theme
Theme URI: https://mtproxier.com/
Author: MTProxier
Author URI: https://mtproxier.com/
Description: A custom WordPress theme designed to replicate the Apple aesthetic for a VPN sales website. Based on the Figma design provided by the user.
Version: 1.0
Requires at least: 5.0
Tested up to: 6.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: applevpn
Tags: custom-theme, woocommerce, apple-design, dark-mode-support

This theme is designed to be used with WooCommerce and NowPayments.
*/

/* Base */
body{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji',sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    background:#fff;color:#1d1d1f;
  }
  .apple-header{
    background-color:rgba(255,255,255,.7);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
  }
  .dark .apple-header{ background-color:rgba(29,29,31,.7) }
  .dark body{ background:#000;color:#f5f5f7 }
  
  /* Apple-like nav behavior */
  .nav-item{
    display:inline-flex; align-items:center; justify-content:center;
    height:44px; padding:0 .5rem;
    opacity:.88; transition:opacity .2s ease;
    -webkit-tap-highlight-color:transparent;
    text-decoration:none; color:inherit;
  }
  .nav-item:hover{ opacity:1 }
  .nav-item:active{ opacity:.72 }
  .nav-item:focus{ outline:none }
  .nav-item:focus-visible{
    outline:none; border-radius:12px;
    box-shadow:0 0 0 10px rgba(0,0,0,0.14);
  }
  .dark .nav-item:focus-visible{ box-shadow:0 0 0 10px rgba(255,255,255,0.16) }
  
  /* Icons normalize & align */
  .icon{ width:24px; height:24px; display:inline-block; vertical-align:middle }
  svg .icon-scale-apple { transform-box:fill-box; transform-origin:center; transform:scale(1.18) translateY(-8px) }
  svg .icon-scale-bag   { transform-box:fill-box; transform-origin:center; transform:scale(1.16) translateY(-8px) }
  svg .icon-scale-search{ transform-box:fill-box; transform-origin:center; transform:scale(1.16) translateY(-8px) }
  
  /* Sections & cards */
  .section-bg{ background:#fafafa } .dark .section-bg{ background:#000 }
  .card{ background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.05); transition:all .3s }
  .card:hover{ transform:translateY(-5px); box-shadow:0 8px 24px rgba(0,0,0,.1) }
  .dark .card{ background:#1a1a1c }
  .card-title{ color:#1d1d1f } .dark .card-title{ color:#f5f5f7 }
  .card-subtitle{ color:#6e6e73 } .dark .card-subtitle{ color:#86868b }
  .card-price{ color:#1d1d1f } .dark .card-price{ color:#f5f5f7 }
  footer{ background:#f5f5f7 } .dark footer{ background:#1a1a1c }
  .footer-link{ color:#515154 } .dark .footer-link{ color:#d2d2d7 }
  .footer-link:hover{ color:#1d1d1f } .dark .footer-link:hover{ color:#fff }
  .footer-legal{ color:#6e6e73 } .dark .footer-legal{ color:#86868b }
  .btn-primary{ background:#0071e3; color:#fff; transition:background .3s }
  .btn-primary:hover{ background:#0077ed }
  .btn-secondary{ color:#0071e3 } .btn-secondary:hover{ text-decoration:underline }

/* =============================
   Enhancements: Apple-like Layout + Pricing Page
   Version: 1.3 (pricing page improvements)
   ============================= */

/* CSS Variables */
:root{
  --bg:white; --bg-soft:#fafafa; --ink:#1d1d1f; --ink-sub:#6e6e73; --ink-muted:#515154;
  --ink-soft:#d2d2d7; --surface:#fff; --surface-dark:#1a1a1c; --elev:rgba(0,0,0,.05);
  --elev-2:rgba(0,0,0,.1); --accent:#0071e3; --accent-hover:#0077ed; --border:#e5e5ea;
  --font-size-base:16px; --font-size-sm:14px; --font-size-lg:18px; --font-size-xl:24px; --font-size-2xl:32px; --font-size-3xl:48px;
}
.dark:root{
  --bg:#000; --bg-soft:#111; --ink:#f5f5f7; --ink-sub:#86868b; --ink-muted:#d2d2d7;
  --surface:#1a1a1c; --elev:rgba(0,0,0,.35); --elev-2:rgba(0,0,0,.55); --border:#2c2c2e;
}

/* Global base refinements */
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--ink)}
.dark body{background:var(--bg); color:var(--ink)}

/* Container utility (Apple-like centered max-widths) */
.container{ width:100%; max-width:1100px; margin:0 auto; padding:0 24px }
@media (min-width:1280px){ .container{ max-width:1200px } }

/* Header behavior */
.apple-header{ position:sticky; top:0; z-index:1000 }
.apple-header .nav-item:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:8px }
.site-nav-links{display:none}
@media (min-width:768px){ .site-nav-links{display:flex} }

/* Utility classes */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* Button styles */
.btn-primary{ background:var(--accent); color:#fff; border-radius:12px; padding:.75rem 1.25rem; font-weight:600; transition:all .3s ease }
.btn-primary:hover{ background:var(--accent-hover); transform:translateY(-1px) }
.btn-primary:focus-visible{ outline:2px solid var(--accent-hover); outline-offset:3px }
.btn-primary:active{ transform:translateY(1px) }

.btn-secondary{ color:var(--accent); font-weight:600; transition:color .3s ease }
.btn-secondary:hover{ text-decoration:underline }
.btn-secondary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }

/* Pricing section styles */
.pricing-section{ background:var(--bg); padding:6rem 0 }
.pricing-section .subtitle{ color:var(--ink-sub); max-width:720px; margin:0 auto }

.pricing-grid{ display:grid; gap:2rem; margin-top:3rem }
@media (min-width:768px){ .pricing-grid{ grid-template-columns:repeat(3,1fr) } }

.pricing-card{ 
  background:var(--surface); 
  border:1px solid var(--border); 
  border-radius:20px; 
  padding:2rem; 
  display:flex; 
  flex-direction:column; 
  min-height:100%; 
  box-shadow:0 4px 12px var(--elev); 
  transition:all .3s ease; 
  position:relative;
  overflow:hidden;
}
.pricing-card:hover{ 
  transform:translateY(-8px); 
  box-shadow:0 12px 28px var(--elev-2);
  border-color:var(--accent);
}
.pricing-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--accent), var(--accent-hover));
  opacity:0;
  transition:opacity .3s ease;
}
.pricing-card:hover::before{
  opacity:1;
}

.pricing-card .plan-name{ font-size:1.125rem; font-weight:600; color:var(--ink); margin-bottom:.5rem }
.pricing-card .price{ margin-top:1rem; font-size:2.75rem; line-height:1.1; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums }
.pricing-card .price .unit{ font-size:1rem; font-weight:500; color:var(--ink-sub) }

.pricing-card .features{ margin-top:1.25rem; color:var(--ink-sub); display:grid; gap:.5rem }
.pricing-card .features li{ 
  list-style:none; 
  display:flex; 
  align-items:center; 
  gap:.5rem;
  font-size:.875rem;
}
.pricing-card .features li::before{ 
  content:"✓"; 
  font-weight:700; 
  color:var(--accent);
  font-size:1rem;
}
/* When explicit icons are provided next to text */
.pricing-card .features.features--icons li::before{ content:none }
.pricing-card .features.features--icons svg{ width:20px; height:20px; color:var(--accent); flex-shrink:0 }

.pricing-card .cta{ margin-top:auto; display:flex; gap:.75rem; align-items:center; padding-top:1.5rem }
.pricing-card .cta .btn-primary{ width:100%; text-align:center }

.plan-recommended{ 
  border:2px solid var(--accent); 
  box-shadow:0 10px 30px var(--elev-2);
  transform:scale(1.02);
}
.plan-recommended:hover{
  transform:scale(1.02) translateY(-8px);
}

.badge{ 
  display:inline-flex; 
  align-items:center; 
  gap:.4rem; 
  background:rgba(0,113,227,.1); 
  color:var(--accent); 
  border-radius:999px; 
  padding:.35rem .7rem; 
  font-size:.8125rem; 
  font-weight:600;
  position:absolute;
  top:1rem;
  right:1rem;
}
.dark .badge{ background:rgba(0,113,227,.2) }

/* Centered badge variant for pricing cards (Apple-like) */
.badge--center{
  right:auto; left:50%; top:0; transform:translate(-50%, -50%);
  background:var(--accent); color:#fff; box-shadow:0 2px 8px var(--elev);
  padding:.4rem 1rem; font-weight:700; letter-spacing:.1px;
}

/* Billing toggle styles */
.billing-toggle{ 
  display:inline-flex; 
  align-items:center; 
  gap:.5rem; 
  border:1px solid var(--border); 
  border-radius:999px; 
  padding:.25rem; 
  background:var(--surface);
  box-shadow:0 2px 8px var(--elev);
}
.billing-toggle .opt{ 
  padding:.4rem .8rem; 
  border-radius:999px; 
  cursor:pointer; 
  user-select:none; 
  color:var(--ink-sub);
  transition:all .3s ease;
  font-size:.875rem;
  font-weight:500;
}
.billing-toggle .opt.active{ 
  background:var(--ink); 
  color:var(--bg);
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.dark .billing-toggle .opt.active{ 
  background:#f5f5f7; 
  color:#000;
  box-shadow:0 2px 8px rgba(255,255,255,.1);
}
.billing-toggle .opt:hover:not(.active){
  color:var(--ink);
}

/* FAQ section styles */
.faq-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.5rem;
  transition:all .3s ease;
}
.faq-item:hover{
  border-color:var(--accent);
  box-shadow:0 4px 16px var(--elev);
}

/* Responsive improvements */
@media (max-width:768px){
  .pricing-grid{
    grid-template-columns:1fr;
    gap:1.5rem;
  }
  
  .pricing-card{
    padding:1.5rem;
  }
  
  .pricing-card .price{
    font-size:2.25rem;
  }
  
  .billing-toggle{
    flex-direction:column;
    width:100%;
    max-width:300px;
  }
  
  .billing-toggle .opt{
    width:100%;
    text-align:center;
  }
}

/* Animation classes */
.hidden{ display:none !important }
.fade-in{ animation:fadeIn .5s ease-in }
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(20px) }
  to{ opacity:1; transform:translateY(0) }
}

/* Enhanced card hover effects */
.card{ 
  background:var(--surface); 
  box-shadow:0 4px 12px var(--elev); 
  transition:all .3s ease;
  border:1px solid var(--border);
  border-radius:16px;
}
.card:hover{ 
  transform:translateY(-5px); 
  box-shadow:0 8px 24px var(--elev-2);
  border-color:var(--accent);
}

.card-title{ color:var(--ink); font-weight:600 }
.card-subtitle{ color:var(--ink-sub) }
.card-price{ color:var(--ink); font-weight:700 }

/* Footer styles */
footer{ background:var(--bg-soft); border-top:1px solid var(--border) }
.footer-link{ color:var(--ink-muted); transition:color .3s ease }
.footer-link:hover{ color:var(--ink) }
.footer-legal{ color:var(--ink-sub) }

/* Dark mode specific adjustments */
.dark .pricing-card{
  background:var(--surface-dark);
  border-color:var(--border);
}

.dark .card{
  background:var(--surface-dark);
  border-color:var(--border);
}

.dark .faq-item{
  background:var(--surface-dark);
  border-color:var(--border);
}

/* Accessibility improvements */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important }
}

@media (prefers-reduced-motion: reduce){
  .nav-item{ transition:none }
  .card{ transition:none }
  .pricing-card{ transition:none }
  .billing-toggle .opt{ transition:none }
}

/* Mobile menu */
#mobile-menu-backdrop{opacity:1;background:rgba(250,250,252,.6)}
#mobile-menu-panel{will-change:transform}
#mobile-menu-panel .mobile-menu-items a.nav-item{display:block; padding:.75rem 1rem; border-radius:10px}
#mobile-menu-panel .mobile-menu-items a.nav-item:hover{background:var(--bg-soft)}
.dark #mobile-menu-panel .mobile-menu-items a.nav-item:hover{background:#111}

/* WooCommerce general layout helpers */
.woocommerce .section-container, .woocommerce .container{width:100%; max-width:1100px; margin:0 auto; padding:0 24px}
.woocommerce .woocommerce-notices-wrapper{margin:1rem 0}
.woocommerce .button, .woocommerce button.button, .woocommerce a.button{
  background:var(--accent); color:#fff; border-radius:12px; padding:.6rem 1rem; font-weight:600; transition:all .3s ease;
}
.woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover{background:var(--accent-hover); transform:translateY(-1px)}
.woocommerce input.input-text, .woocommerce select, .woocommerce textarea{
  border:1px solid var(--border); border-radius:10px; padding:.6rem .8rem; background:var(--surface); color:var(--ink);
}
.dark .woocommerce input.input-text, .dark .woocommerce select, .dark .woocommerce textarea{
  background:var(--surface-dark); border-color:var(--border); color:var(--ink);
}
.woocommerce table.shop_table{border:1px solid var(--border); border-radius:14px; overflow:hidden}
.woocommerce table.shop_table th, .woocommerce table.shop_table td{padding:1rem}
.woocommerce-cart .cart-collaterals .cart_totals{border:1px solid var(--border); border-radius:14px; padding:1rem}
.woocommerce form .form-row{margin-bottom:1rem}
.woocommerce .woocommerce-info{border-top-color:var(--accent)}
.woocommerce-error, .woocommerce-info, .woocommerce-message{border-radius:10px}

/* My Account */
.woocommerce-account .woocommerce-MyAccount-navigation{border:1px solid var(--border); border-radius:14px; padding:1rem}
.woocommerce-account .woocommerce-MyAccount-navigation ul{display:grid; gap:.5rem}
.woocommerce-account .woocommerce-MyAccount-navigation li a{display:block; padding:.5rem .75rem; border-radius:10px}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--bg-soft)}
.dark .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:#111}

/* Checkout */
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2{float:none; width:100%}
.woocommerce-checkout #order_review{border:1px solid var(--border); border-radius:14px; padding:1rem}

@media (max-width:768px){
  .apple-header nav{height:auto; padding-top:.25rem; padding-bottom:.25rem}
}