/*
Theme Name: TavaCam
Theme URI: https://toan.host
Author: Antigravity
Author URI: https://google.com
Description: Theme TavaCam custom design using Tailwind CSS with FPT Camera inspired visual.
Version: 1.4.1
Text Domain: tavacam
*/

:root {
    --brand-orange: #f84b2f;
    /* FPT Orange Tone */
    --brand-orange-hover: #e03a1f;
    --brand-dark: #0f172a;
    --brand-gray: #64748b;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
    /* Reduced from default 16px */
}

/* =========================================
   UNIVERSAL DESIGN TOKENS
   ========================================= */
.btn-primary {
    @apply bg-[#f84b2f] text-white px-6 py-3 rounded-full font-bold transition-all duration-300 hover:bg-[#e03a1f] shadow-lg shadow-orange-500/20 active:scale-95 flex items-center gap-2 text-sm;
}

.section-title {
    @apply text-2xl md:text-4xl lg:text-5xl font-black text-slate-900 dark:text-white leading-tight;
}

.section-subtitle {
    @apply text-[#f84b2f] font-bold uppercase tracking-widest text-xs mb-3 block;
}

/* =========================================
   COMPONENTS
   ========================================= */

/* Glassmorphism */
.glass-card {
    @apply bg-white/80 dark:bg-slate-900/80 backdrop-blur-md border border-white/20 dark:border-slate-800/50 shadow-xl;
}

/* Flip Card Styles */
.perspective-1000 {
    perspective: 1000px;
}

.transform-style-3d {
    transform-style: preserve-3d;
}

.backface-hidden {
    backface-visibility: hidden;
}

.rotate-y-180 {
    transform: rotateY(180deg);
}

/* Phone Mockups - Realistic */
.phone-frame-landscape {
    @apply border-[12px] border-[#1a1a1a] rounded-[40px] overflow-hidden relative bg-black shadow-2xl mx-auto;
    box-shadow: 0 0 0 2px #333, 0 30px 60px -15px rgba(0, 0, 0, 0.5);
    aspect-ratio: 16/9;
}

.phone-frame-portrait {
    @apply border-[12px] border-[#1a1a1a] rounded-[44px] overflow-hidden relative bg-black shadow-2xl mx-auto;
    box-shadow: 0 0 0 2px #333, 0 40px 80px -20px rgba(0, 0, 0, 0.6);
    width: 280px;
    height: 580px;
}

/* Landscape Camera / Notch */
.phone-frame-landscape::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    width: 4px;
    height: 100px;
    background: #222;
    border-radius: 0 8px 8px 0;
    z-index: 20;
}

/* Portrait Dynamic Island */
.phone-frame-portrait::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 18px;
    background: #000;
    border-radius: 12px;
    z-index: 20;
}

/* Custom Scrollbar */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Swiper Customization */
.swiper-pagination-bullet-active {
    background: #f84b2f !important;
}

/* =========================================
   ARTICLE CONTENT (PROSE OVERRIDES)
   ========================================= */
.prose {
    @apply max-w-none text-slate-700 dark:text-slate-300 leading-relaxed;
    font-size: 15px;
    /* Reduced */
}

.prose h2 {
    @apply text-2xl md:text-3xl font-black text-slate-900 dark:text-white mt-10 mb-5;
}

.prose h3 {
    @apply text-xl md:text-2xl font-bold text-slate-900 dark:text-white mt-8 mb-4;
}

.prose a {
    @apply text-[#f84b2f] font-bold no-underline border-b-2 border-orange-500/20 hover:border-orange-500 transition-all;
}

/* =========================================
   WHY CHOOSE PREMIUM (FPT STYLE)
   ========================================= */
.item-why-premium {
    @apply relative overflow-hidden rounded-[32px] bg-white dark:bg-slate-900 shadow-lg transition-all duration-500 hover:shadow-2xl;
}

.item-why-premium .avarta {
    @apply relative h-[240px] overflow-hidden;
}

.item-why-premium .avarta img {
    @apply w-full h-full object-cover transition-transform duration-1000;
}

.item-why-premium:hover .avarta img {
    @apply scale-110;
}

.item-why-premium .content-box {
    @apply absolute bottom-0 left-0 right-0 p-6;
}

.item-why-premium .info-card {
    @apply bg-white/95 dark:bg-slate-900/95 backdrop-blur-xl p-6 md:p-7 rounded-[28px] border border-white/20 dark:border-slate-800/50 shadow-xl relative -mt-16 z-10 mx-2;
}

.item-why-premium .icon-wrapper {
    @apply w-14 h-14 rounded-xl bg-orange-600 flex items-center justify-center mb-5 shadow-lg shadow-orange-500/30;
}

.item-why-premium h4 {
    @apply text-base md:text-lg font-black text-slate-900 dark:text-white leading-tight mb-3 uppercase italic;
}

.item-why-premium p {
    @apply text-xs md:text-sm text-slate-500 dark:text-slate-400 leading-relaxed;
}

.item-why-premium .icon-wrapper svg,
.item-why-premium .icon-wrapper i {
    @apply text-white w-7 h-7;
}

.item-why-premium .icon-wrapper svg path {
    fill: currentColor !important;
}