/*
Theme Name: AreaGym.ro
Author: NeverSettle
Author URI: https://neversettle.ro
Template: f7
*/



/*

put your child theme styles here


you don't need any @import rules

*/

/* Centre Area Gym Brasov */





/* ==========================================
   1. STILURI ELEMENTE INTERNE CARD
   ========================================== */
/* Badge-ul plutitor de pe imagine */
.area-badge-floating {
    background-color: rgba(0, 0, 0, 0.60) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #ffffff !important;
    font-family: 'Inter', sans-serif;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 99px !important;
}

/* Badge-ul turcoaz premium de brand */
.area-badge-premium {
    display: inline-flex;
    align-items: center;
    background-color: rgba(0, 242, 254, 0.06) !important;
    color: #00F2FE !important;
    font-family: 'Inter', sans-serif;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 16px !important;
    border-radius: 99px !important;
    border: 1px solid rgba(0, 242, 254, 0.15);
}

/* Stilul pentru Titlul principal (H2) */
.area-card-title {
    font-family: 'Inter', sans-serif;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: #ffffff !important;
}

/* Stilul pentru textul de descriere gri */
.area-card-description {
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #9C9C9C !important;
}

/* ==========================================
   2. STRUCTURA CARDULUI & EFECT HOVER
   ========================================== */
.area-gym-card {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    background-color: #0B0B0C !important;
    padding-bottom: 32px !important; 
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s ease-in-out, 
                background-color 0.4s ease-in-out,
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.area-gym-card:hover .area-card-title {
    color: #00F2FE !important;
}

.area-gym-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(0, 242, 254, 0.45) !important; 
    background-color: #0F0F11 !important;
    box-shadow: 0 50px 90px rgba(0, 0, 0, 0.85), 
                0 30px 60px rgba(0, 242, 254, 0.20), 
                0 50px 120px rgba(0, 242, 254, 0.12),
                0 80px 180px rgba(0, 242, 254, 0.06) !important;
}

.elementor-icon { display: flex !important; }

/* Grid-ul pentru facilități */
.area-gym-card .elementor-icon-list-items {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 24px !important;
    margin-bottom: 32px !important; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; 
    padding-bottom: 24px !important;
}

/* ==========================================
   3. REGLARE CONTAINER NOU BUTOANE (DESKTOP)
   ========================================== */
.area-buttons-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 16px !important;           
    padding: 0 32px !important;     
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 16px !important;
}

.area-buttons-row .btn-area-secondary,
.area-buttons-row .btn-area-primary {
    flex: 1 !important;             
    display: block !important;
    width: auto !important;
    margin: 0 !important;
}


/* ============================================
   Area Gym — butoane CTA
   Clase Elementor:
   principal .......... ag-cta
   secundar pe închis . ag-cta ag-cta--ghost on-dark
   secundar pe deschis  ag-cta ag-cta--ghost
   ============================================ */
.btn-area-inline .elementor-button-content-wrapper {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-area-inline .elementor-button-icon {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    width: auto !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center;
    color: inherit !important;
}



/* ==========================================
   RESPONSIVE: OPTIMIZARE AUTOMATĂ MOBIL
   ========================================== */
@media (max-width: 767px) {
    .area-buttons-row {
        flex-direction: column !important; /* Întoarce butoanele unul sub altul */
        gap: 12px !important;              /* Spațiu fin între ele pe verticală */
        padding: 0 24px !important;        /* Margini ușor mai aerisite pentru ecrane mici */
    }

    .area-buttons-row .btn-area-secondary,
    .area-buttons-row .btn-area-primary {
        flex: none !important;
        width: 100% !important;            /* Ocupă toată lățimea cardului */
    }

}

/* ==========================================
   4. CLASE REUTILIZABILE BUTTONS
   ========================================== */
/* --- BUTONUL SECUNDAR (Detalii) --- */
.btn-area-secondary .elementor-button {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    width: 100% !important;
    display: block !important;
    padding: 15px 16px !important; 
    text-align: center !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}
.btn-area-secondary .elementor-button:hover {
    border-color: rgba(255, 255, 255, 0.4) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* --- BUTONUL PRINCIPAL (Abonament) --- */
.btn-area-primary .elementor-button {
    background: #00F2FE !important;
    background-color: #00F2FE !important;
    color: #000000 !important;
    border-radius: 12px !important;
    width: 100% !important;
    display: block !important;
    padding: 15px 16px !important; 
    text-align: center !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}
.btn-area-primary .elementor-button:hover {
    background: #A6FFFF !important;
    background-color: #A6FFFF !important;
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.7) !important;
    color: #000000 !important;
}
/* 1. Definim proprietatea pentru animația unghiului */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* 2. Stilăm link-ul/butonul principal */
#abonamentporsche {
    position: relative;
    background: #000 !important; /* Fundal negru pentru contrast */
    border: none !important;
    z-index: 1;
    overflow: visible; /* Important pentru ca degradeul să iasă puțin în exterior */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 3. Masca interioară (Fundalul butonului peste care stă textul) */
#abonamentporsche::before {
    content: '';
    position: absolute;
    inset: 2px; /* Grosimea bordurii */
    background: #000; /* Aceeași culoare ca fundalul butonului */
    border-radius: inherit; /* Preia rotunjirea de la buton */
    z-index: -1;
}

/* 4. Chenarul degrade care se rotește */
#abonamentporsche::after {
    content: '';
    position: absolute;
    inset: -3px; /* Extinde degradeul ușor în exteriorul butonului */
    border-radius: inherit; /* Preia rotunjirea de la buton */
    /* Am adăugat roșu (#FF0000) în mixul tău original */
    background: conic-gradient(
        from var(--angle),
        #003f3c, 
        #00d1c1, 
        #FF0000, 
        #00fff5, 
        #003f3c
    );
    animation: spin-border 3s linear infinite;
    z-index: -2;
}

/* 5. Asigurăm că textul și iconița rămân vizibile */
#abonamentporsche .elementor-button-content-wrapper {
    position: relative;
    z-index: 2;
    color: #fff;
}

/* 6. Animația propriu-zisă */
@keyframes spin-border {
    to {
        --angle: 360deg;
    }
}


/* ============================================
   GLOW BORDER — clasă reutilizabilă (v2)
   ============================================ */

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.btn-glow-border {
    --glow-border-width: 4px;
    --glow-speed: 3s;
    --glow-mask-bg: #000;
    --glow-radius: 12px; /* <- setează aici rotunjirea dorită, implicit */

    position: relative;
    z-index: 1;
    overflow: visible;
    border-radius: var(--glow-radius) !important;
}

.btn-glow-border::before {
    content: '';
    position: absolute;
    inset: var(--glow-border-width);
    background: var(--glow-mask-bg);
    border-radius: var(--glow-radius);
    z-index: -1;
}

.btn-glow-border::after {
    content: '';
    position: absolute;
    inset: calc(var(--glow-border-width) * -1);
    border-radius: var(--glow-radius);
    background: conic-gradient(
        from var(--angle),
        #003f3c,
        #00d1c1,
        #FF0000,
        #00fff5,
        #003f3c
    );
    animation: spin-border var(--glow-speed) linear infinite;
    z-index: -2;
}

.btn-glow-border .elementor-button-content-wrapper,
.btn-glow-border .elementor-button-text,
.btn-glow-border .elementor-button {
    position: relative;
    z-index: 2;
    border-radius: inherit; /* butonul real preia radius-ul de la wrapper */
}



@keyframes spin-border {
    to {
        --angle: 360deg;
    }
}

#presale-progress {
    transform: none !important;
}

#presale-progress {
    transform: none !important;
}


#presale-progress,
#presale-progress .elementor-progress-wrapper,
#presale-progress .elementor-progress-bar {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
}


#presale-progress .elementor-progress-wrapper {
    position: relative;
    overflow: hidden !important;
    transform: none !important;
}


#presale-progress .elementor-progress-bar {
    will-change: width;
    transform: none !important;
    transition: width 0.3s ease !important;
}


#presale-progress .elementor-progress-wrapper::after {
    content: attr(data-label);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    pointer-events: none;
}

/* ===== Recenzii pe taburi (clase globale ag-rev-*) — tabul activ ===== */
.elementor .ag-rev-tab.e--selected,
.elementor .ag-rev-tab.e--selected:hover {
	background-color: #00D1C1;
	color: #000000;
}
.elementor .ag-rev-tab:focus-visible {
	outline: 2px solid #3DF0E1;
	outline-offset: 2px;
}
/* stilul de focus al kit-ului face butoanele pătrate — tabul rămâne capsulă */
.elementor .ag-rev-tab:is(:hover, :focus, :active) {
	border-radius: 999px;
}
.elementor .ag-rev-tab:not(.e--selected):focus:not(:focus-visible) {
	background-color: transparent;
	color: rgba(255, 255, 255, 0.68);
}
/* hover fără fundal alb: Elementor pune #E0E0E0 pe .e-tab-base:hover; aici doar textul devine turcoaz */
.elementor .ag-rev-tab:not(.e--selected):hover,
.elementor .ag-rev-tab:not(.e--selected):focus-visible {
	background-color: transparent !important;
	color: #3DF0E1;
}

/* ===== Cardurile sălilor (clase globale ag-club-*) ===== */
/* „Vezi sala” acoperă tot cardul; „Indicații” stă deasupra și se apasă separat */
.elementor .ag-club-card {
	position: relative;
}
.elementor .ag-club-go::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
.elementor .ag-club-dir {
	position: relative;
	z-index: 2;
}
.elementor .ag-club-card:has(.ag-club-go:focus-visible) {
	outline: 2px solid #3DF0E1;
	outline-offset: 3px;
}
/* starea live (scriptul program-dinamic.js pune is-live / is-open) */
.elementor .ag-club-status.is-live::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #7D8A89;
	flex: none;
}
.elementor .ag-club-status.is-open::before {
	background-color: #3DF0E1;
	box-shadow: 0 0 8px #3DF0E1;
}

/* Paginile construite cu secțiunile noi (ag-section) nu afișează titlul vechi al temei */
body:has(.ag-section) #sub-header {
	display: none;
}
/* Povestea pe scurt (ag-tlm) ocupă toată lățimea, cu textul aliniat la stânga, chiar dacă e într-o secțiune cu titlu centrat */
.elementor .ag-tlm {
	max-width: none !important;
	justify-self: stretch !important;
	align-self: stretch !important;
	text-align: left !important;
}