/* Stilurile publice ale site-ului. Partea generata din setari (culori, font) sta inline in includes/header.php. */
/* Iconitele Font Awesome TREBUIE sa bata regulile de font globale */
i.fas, i.far, i.fab, i.fal, i.fad, i.fa,
.fas, .far, .fab, .fal, .fad, .fa,
i[class*="fa-"], [class*=" fa-"],
button i, a i, span i {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands", "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    text-transform: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}
.far, i.far {
    font-weight: 400 !important;
}
.fab, i.fab {
    font-family: "Font Awesome 6 Brands", "FontAwesome" !important;
    font-weight: 400 !important;
}

/* Index page alternating section backgrounds (Culori) */
.index-bg-primary { background-color: var(--color-surface-base) !important; }
.index-bg-secondary { background-color: var(--color-background-secondary) !important; }


/* Apply uppercase to all text elements */
/* DISABLED - Commented out as requested
body, p, span, div, a, h1, h2, h3, h4, h5, h6, 
button, label, input, textarea, select, 
.nav-link, .label-small, li, td, th {
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}
*/

/* Playfair Display doar pentru sigla si slogan, daca e nevoie */
.serif-logo, .serif-logo * {
    font-family: 'Playfair Display', serif !important;
    text-transform: none !important;
}

/* Typography Improvements */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: 0.08em;
}

/* ============================================
   ENHANCED TYPOGRAPHY SYSTEM
   ============================================ */

/* Base typography improvements */
body {
    line-height: 1.75;
    letter-spacing: 0.025em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--color-surface-base);
    color: var(--color-ink-primary);
}

/* Scara tipografica, cu ierarhie mai clara si marimi crescute */
/* Headings inherit color so they stay visible on dark sections (e.g. hero) */
h1, h2, h3, h4, h5, h6 {
    color: inherit;
}
h1 {
    font-size: 3.25rem; /* Increased from 2.75rem */
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

h2 {
    font-size: 2.75rem; /* Increased from 2.25rem */
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: 0.875rem;
}

h3 {
    font-size: 2.125rem; /* Increased from 1.75rem */
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    margin-bottom: 0.75rem;
}

h4 {
    font-size: 1.75rem; /* Increased from 1.5rem */
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.01em;
    margin-bottom: 0.625rem;
}

h5 {
    font-size: 1.5rem; /* Increased from 1.25rem */
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
}

h6 {
    font-size: 1.25rem; /* Increased from 1.125rem */
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.025em;
    margin-bottom: 0.5rem;
}

p {
    line-height: 1.75;
    margin-bottom: 1rem;
}

/* Titluri cu serife pentru elementele de brand */
.serif h1, .serif h2, .serif h3 {
    font-family: 'Playfair Display', serif;
    letter-spacing: -0.03em;
}

/* ============================================
   ENHANCED COLOR PALETTE & VISUAL EFFECTS
   ============================================ */

/* Sistem de umbre pe niveluri de inaltime */
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.shadow-md {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.shadow-lg {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.shadow-xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* Subtle gradient backgrounds */
.bg-gradient-subtle {
    background: linear-gradient(to bottom, var(--color-surface-alt) 0%, var(--color-surface-card) 100%);
}

.bg-gradient-card {
    background: linear-gradient(135deg, var(--color-surface-card) 0%, var(--color-surface-elevated) 100%);
}

/* Navigatia principala: ridicata si clara; lasam meniul (de exemplu Servicii) sa iasa sub bara */
#main-nav {
    background: var(--color-surface-card) !important;
    border-bottom: 1px solid var(--color-border) !important;
    box-shadow: var(--shadow-nav);
}
#main-nav a.text-slate-700:hover,
#main-nav button.text-slate-600:hover {
    color: var(--color-brand-orange) !important;
}
#nav-search-dropdown,
#nav-mobile-menu {
    background: var(--color-surface-card) !important;
    border-color: var(--color-border) !important;
}

/* Titlurile de hero pe sectiuni inchise: le fortam albe, pentru contrast */
#servicii-hero h1,
#about-hero h1,
#about-how-we-work h1, #about-how-we-work h2,
#businesstour-hero h1,
#businesstour-event-hero h1,
#blog-article-hero h1,
#index-hero-fallback h1,
#public-index-businesstour h2 {
    color: #ffffff !important;
}

/* Sectiuni inchise - folosim navy-ul de brand (se schimba din Culori) */
#public-index-businesstour,
#servicii-hero,
#about-hero,
#about-how-we-work,
#businesstour-hero,
#businesstour-event-hero,
#blog-article-hero {
    background: var(--color-brand-navy) !important;
}
#index-hero-fallback {
    background: var(--color-brand-navy) !important;
}
#businesstour-power-partnership {
    background: var(--color-brand-navy) !important;
}

/* Subsolul - culoarea vine din Culori */
#public-footer {
    background: var(--color-footer) !important;
    border-top-color: rgba(255,255,255,0.06) !important;
}
#public-footer a:hover {
    color: var(--color-brand-orange) !important;
}
#public-footer-links-title {
    color: #f1f5f9;
}
#public-footer-services-title,
#public-footer-contact-title {
    color: var(--color-brand-orange) !important;
}

/* Butoane, cu stari de hover mai clare */
a[class*="bg-"], button[class*="bg-"] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 700;
    position: relative;
    overflow: hidden;
}

a[class*="bg-"]:hover, button[class*="bg-"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

a[class*="bg-"]:active, button[class*="bg-"]:active {
    transform: translateY(0);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

/* Better container max-width */
.container {
    max-width: 1280px;
}

/* Improved section spacing */
section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* Stari de focus vizibile, pentru accesibilitate */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--color-brand-orange);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============================================
   UNIFIED BREADCRUMB (matches categories)
   ============================================ */
.breadcrumb-nav {
    margin-bottom: 1.5rem;
    background: var(--color-surface-elevated);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
}
.breadcrumb-nav ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    font-size: 0.875rem;
    font-weight: 600;
    /* text-transform: uppercase; DISABLED */
    letter-spacing: 0.03em;
}
.breadcrumb-nav li {
    display: flex;
    align-items: center;
}
.breadcrumb-nav a {
    color: var(--color-ink-muted);
    transition: color 0.2s;
}
.breadcrumb-nav a:hover {
    color: var(--color-brand-orange);
}
.breadcrumb-nav .breadcrumb-current {
    color: var(--color-ink-primary);
    font-weight: 700;
}
.breadcrumb-nav .breadcrumb-sep {
    color: var(--color-border-strong);
    margin: 0 0.5rem;
    font-size: 0.625rem;
    pointer-events: none;
}
@media (max-width: 640px) {
    /* Ramane rand care se infasoara, nu coloana cu un element pe linie: pentru doua-trei
       verigi scurte ("Acasa > Catalog") coloana ocupa dublu pe inaltime si nu mai arata a
       breadcrumb. `flex-wrap: wrap` de mai sus rupe randul doar cand chiar nu incape. */
    .breadcrumb-nav {
        margin-bottom: 1rem;
        padding: 0.5rem 0.75rem;
    }
    .breadcrumb-nav ol {
        row-gap: 0.25rem;
        font-size: 0.8125rem;
    }
    .breadcrumb-nav .breadcrumb-sep {
        margin: 0 0.35rem;
    }
}

/* ============================================
   UNIFIED PAGE SECTION & COLOURS (public)
   ============================================ */
.page-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
@media (min-width: 640px) {
    .page-section { padding-top: 4rem; padding-bottom: 4rem; }
}
@media (min-width: 768px) {
    .page-section { padding-top: 5rem; padding-bottom: 5rem; }
}
@media (min-width: 1024px) {
    .page-section { padding-top: 6rem; padding-bottom: 6rem; }
}
.page-section-alt {
    background-color: var(--color-surface-alt);
}
.page-heading {
    color: var(--color-ink-primary);
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
    .page-heading { font-size: 2.25rem; }
}
.page-heading-underline {
    width: 5rem;
    height: 0.25rem;
    background: linear-gradient(90deg, var(--color-brand-orange), var(--color-brand-orange-hover));
    margin-top: 1rem;
    border-radius: 2px;
}
.card-unified {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: var(--shadow-card);
}
.card-unified:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-card-hover);
}

/* ============================================
   GLOBAL FRONTEND (index-like) – use on all public pages
   ============================================ */
.frontend-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
@media (min-width: 640px) {
    .frontend-section { padding-top: 4rem; padding-bottom: 4rem; }
}
@media (min-width: 768px) {
    .frontend-section { padding-top: 5rem; padding-bottom: 5rem; }
}
@media (min-width: 1024px) {
    .frontend-section { padding-top: 6rem; padding-bottom: 6rem; }
}
.frontend-label {
    color: var(--color-brand-orange);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
}
@media (min-width: 640px) {
    .frontend-label { font-size: 0.875rem; }
}
.frontend-section-title {
    color: var(--color-brand-navy);
    font-weight: 700;
    font-size: 1.5rem;
}
@media (min-width: 640px) {
    .frontend-section-title { font-size: 1.875rem; }
}
@media (min-width: 768px) {
    .frontend-section-title { font-size: 2.25rem; }
}
.frontend-hero-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
}
@media (min-width: 640px) {
    .frontend-hero-title { font-size: 2.25rem; }
}
@media (min-width: 768px) {
    .frontend-hero-title { font-size: 3rem; }
}
.frontend-hero-subtitle {
    font-size: 0.875rem;
}
@media (min-width: 640px) {
    .frontend-hero-subtitle { font-size: 1.125rem; }
}
.frontend-card {
    background: var(--color-surface-card);
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-border);
    overflow: hidden;
}
@media (min-width: 640px) {
    .frontend-card { border-radius: 1rem; }
}

/* Toast Notification Styles */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toast {
    min-width: 300px;
    max-width: 400px;
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInRight 0.3s ease-out;
    font-size: 14px;
    font-weight: 500;
}

.toast-success {
    background-color: #10b981;
    color: white;
}

.toast-error {
    background-color: #ef4444;
    color: white;
}

.toast-info {
    background-color: #3b82f6;
    color: white;
}

.toast-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.toast-message {
    flex: 1;
}

.toast-close {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
    opacity: 0.8;
    transition: opacity 0.2s;
    font-size: 18px;
    line-height: 1;
}

.toast-close:hover {
    opacity: 1;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast.hiding {
    animation: slideOutRight 0.3s ease-out forwards;
}

/* ============================================
   ANIMATION SYSTEM
   ============================================ */

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Slide-up animation */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale-in animation */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animatie de puls pentru starile de incarcare */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Intrare din stanga */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animation utility classes */
.animate-fade-in {
    animation: fadeIn 0.5s ease-out;
}

.animate-slide-up {
    animation: slideUp 0.5s ease-out;
}

.animate-scale-in {
    animation: scaleIn 0.4s ease-out;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Stagger animation delay classes */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }

/* ============================================
   SCROLLBAR & SMOOTH SCROLL (matches admin/backend)
   ============================================ */
html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #ffffff;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #ffffff;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 6px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-thumb:hover {
    background: #ea580c;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #ffffff;
}

*:hover {
    scrollbar-color: #ea580c #ffffff;
}

/* Enhanced transition utilities */
.transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-fast {
    transition: all 0.2s ease-out;
}

.transition-slow {
    transition: all 0.5s ease-out;
}

/* ============================================
   ENHANCED CARD STYLES
   ============================================ */

.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ============================================
   LOADING STATES
   ============================================ */

.loading-skeleton {
    background: linear-gradient(90deg, var(--color-surface-alt) 25%, var(--color-border) 50%, var(--color-surface-alt) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Mobile Responsive Styles - Global */
@media (max-width: 1024px) {
    .xl\\:grid-cols-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    h1 {
        font-size: 1.875rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
    }
    
    .grid {
        gap: 1rem !important;
    }
    
    .lg\\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    .xl\\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    .md\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .lg\\:grid-cols-3,
    .xl\\:grid-cols-4,
    .md\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   QUILL EDITOR SIZE CLASSES FOR HERO SLIDER
   ============================================ */
/* Clasele de marime din Quill TREBUIE sa bata utilitarele Tailwind */
.ql-size-small { font-size: 0.75em !important; }
.ql-size-large { font-size: 1.5em !important; }
.ql-size-huge { font-size: 2.5em !important; }

/* Hero slider specific - Very high specificity to override Tailwind */
h1.hero-slide-title .ql-size-small,
h1.hero-slide-title span.ql-size-small,
.hero-slide-title .ql-size-small,
.hero-slide-title span.ql-size-small {
    font-size: 0.75em !important;
    line-height: inherit !important;
    display: inline !important;
}
h1.hero-slide-title .ql-size-large,
h1.hero-slide-title span.ql-size-large,
.hero-slide-title .ql-size-large,
.hero-slide-title span.ql-size-large {
    font-size: 1.5em !important;
    line-height: inherit !important;
    display: inline !important;
}
h1.hero-slide-title .ql-size-huge,
h1.hero-slide-title span.ql-size-huge,
.hero-slide-title .ql-size-huge,
.hero-slide-title span.ql-size-huge {
    font-size: 2.5em !important;
    line-height: inherit !important;
    display: inline !important;
}

p.hero-slide-subtitle .ql-size-small,
p.hero-slide-subtitle span.ql-size-small,
.hero-slide-subtitle .ql-size-small,
.hero-slide-subtitle span.ql-size-small {
    font-size: 0.75em !important;
    line-height: inherit !important;
    display: inline !important;
}
p.hero-slide-subtitle .ql-size-large,
p.hero-slide-subtitle span.ql-size-large,
.hero-slide-subtitle .ql-size-large,
.hero-slide-subtitle span.ql-size-large {
    font-size: 1.5em !important;
    line-height: inherit !important;
    display: inline !important;
}
p.hero-slide-subtitle .ql-size-huge,
p.hero-slide-subtitle span.ql-size-huge,
.hero-slide-subtitle .ql-size-huge,
.hero-slide-subtitle span.ql-size-huge {
    font-size: 2.5em !important;
    line-height: inherit !important;
    display: inline !important;
}

/* Ensure Quill formatting is preserved in hero slider */
.hero-slide-title p,
.hero-slide-subtitle p {
    margin: 0 !important;
    display: inline !important;
    line-height: inherit;
}
.hero-slide-title span,
.hero-slide-subtitle span {
    display: inline !important;
    line-height: inherit;
}
/* Pastram intreruperile de rand venite din Quill */
.hero-slide-title br,
.hero-slide-subtitle br {
    display: block;
    content: "";
    margin-top: 0.5em;
}

/* ============================================
   MOBILE-FIRST / PHONE STYLES
   ============================================ */
@media (max-width: 767px) {
    html {
        font-size: 16px;
    }
    body {
        font-size: 1rem;
        -webkit-text-size-adjust: 100%;
    }
    /* Typography scale on phone */
    h1 { font-size: 1.875rem; line-height: 1.25; margin-bottom: 0.75rem; }
    h2 { font-size: 1.5rem; line-height: 1.3; margin-bottom: 0.625rem; }
    h3 { font-size: 1.25rem; line-height: 1.35; margin-bottom: 0.5rem; }
    h4 { font-size: 1.125rem; margin-bottom: 0.5rem; }
    h5 { font-size: 1.0625rem; margin-bottom: 0.375rem; }
    h6 { font-size: 1rem; margin-bottom: 0.375rem; }
    p { margin-bottom: 0.875rem; font-size: 0.9375rem; }
    /* Section padding */
    section {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
    .page-section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    /* Container safe padding on small phones */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    /* Nav: smaller logo on mobile so it doesn’t dominate */
    #main-nav .container { padding-left: 0.75rem; padding-right: 0.75rem; }
    #main-nav .h-20 { height: 3.5rem; margin-top: 0.25rem; }
    #main-nav svg { max-height: 3.5rem; width: auto; }
    /* Mobile menu: touch-friendly tap targets */
    #nav-mobile-menu a,
    #nav-mobile-menu button {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    /* Hero slider on phone – applies to ALL hero sliders (home, about, catalog, blog, etc.) */
    /* DAR: pe desktop pastram marimile de font puse din admin - suprascriem doar pe mobil */
    .hero-slider-outer .hero-slide-title,
    .hero-slider-outer h1.hero-slide-title {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.35rem !important;
    }
    .hero-slider-outer .hero-slide-subtitle,
    .hero-slider-outer p.hero-slide-subtitle {
        font-size: 0.75rem !important;
        line-height: 1.35 !important;
        margin-bottom: 0.5rem !important;
    }
    /* Suprascriem font-size-ul inline din editor, ca subtitlul sa fie mic pe mobil */
    .hero-slider-outer .hero-slide-subtitle span,
    .hero-slider-outer .hero-slide-subtitle p,
    .hero-slider-outer .hero-slide-subtitle span[style] {
        font-size: 0.75rem !important;
    }
    /* ATENTIE: pe desktop lasam marimile din admin sa functioneze - nu atingem stilurile inline */
    @media (min-width: 768px) {
        /* Lasam font-size-ul inline din admin sa lucreze */
        #about-hero-slider .hero-slide-title span[style*="font-size"],
        #about-hero-slider .hero-slide-title span[style*="fontSize"],
        #about-hero-slider h1.hero-slide-title span[style*="font-size"],
        #about-hero-slider h1.hero-slide-title span[style*="fontSize"],
        #catalog-hero-slider .hero-slide-title span[style*="font-size"],
        #catalog-hero-slider .hero-slide-title span[style*="fontSize"],
        #catalog-hero-slider h1.hero-slide-title span[style*="font-size"],
        #catalog-hero-slider h1.hero-slide-title span[style*="fontSize"] {
            /* Nu suprascriem - lasam stilul inline */
        }
        #about-hero-slider .hero-slide-subtitle span[style*="font-size"],
        #about-hero-slider .hero-slide-subtitle span[style*="fontSize"],
        #about-hero-slider p.hero-slide-subtitle span[style*="font-size"],
        #about-hero-slider p.hero-slide-subtitle span[style*="fontSize"],
        #catalog-hero-slider .hero-slide-subtitle span[style*="font-size"],
        #catalog-hero-slider .hero-slide-subtitle span[style*="fontSize"],
        #catalog-hero-slider p.hero-slide-subtitle span[style*="font-size"],
        #catalog-hero-slider p.hero-slide-subtitle span[style*="fontSize"] {
            /* Nu suprascriem - lasam stilul inline */
        }
    }
    .hero-slider-outer .hero-content {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .hero-slider-outer .hero-cta-wrap,
    .hero-content div.flex {
        flex-direction: column;
        gap: 0.4rem !important;
    }
    /* Butoanele de actiune din hero: potrivite pentru atingere pe mobil */
    .hero-slider-outer .hero-cta-wrap a,
    .hero-slider-outer .hero-content div.flex a,
    .hero-slider-outer .hero-cta-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        min-height: 42px;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em;
        text-align: center !important;
        border-radius: 0.5rem !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }
    @media (min-width: 640px) {
        .hero-slider-outer .hero-cta-wrap a,
        .hero-slider-outer .hero-content div.flex a,
        .hero-slider-outer .hero-cta-btn {
            width: auto !important;
            min-height: auto;
            padding: inherit !important;
            font-size: inherit !important;
        }
    }
    /* Toast pe mobil: pe toata latimea, cu margine */
    .toast-container {
        left: 0.5rem;
        right: 0.5rem;
        top: 0.5rem;
        max-width: none;
    }
    .toast {
        min-width: 0;
        max-width: none;
    }
}
@media (max-width: 480px) {
    .container { padding-left: 0.875rem; padding-right: 0.875rem; }
    #public-footer-content { gap: 1.5rem; }
}
@media (max-width: 380px) {
    .hero-slider-outer .hero-slide-title, .hero-slider-outer h1.hero-slide-title { font-size: 1rem !important; }
    .hero-slider-outer .hero-slide-subtitle, .hero-slider-outer p.hero-slide-subtitle,
    .hero-slider-outer .hero-slide-subtitle span, .hero-slider-outer .hero-slide-subtitle span[style] { font-size: 0.6875rem !important; }
    .hero-slider-outer .hero-cta-btn, .hero-slider-outer .hero-cta-wrap a, .hero-slider-outer .hero-content div.flex a { font-size: 0.65rem !important; padding: 0.45rem 0.6rem !important; }
}