/*
=================================================================
    C1VHOSTING.IT - CUSTOM STYLES FOR TWENTY-ONE THEME
=================================================================
    - Date: 2025-09-14
=================================================================
*/

/* =================================================================
   1. BRAND COLOR PALETTE & GLOBAL VARIABLES
================================================================= */
:root {
    --c1v-orange-primary: #FF6600; /* Primary brand orange */
    --c1v-orange-dark: #E65C00;    /* Darker orange for hover/active states */
    --c1v-orange-light: #FF944D;   /* Lighter orange for accents */
    --c1v-text-primary: #333333;
    --c1v-text-secondary: #666666;
    --c1v-border-color: #e0e0e0;
    --c1v-light-gray-bg: #f8f9fa;
    --c1v-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --c1v-border-radius: 8px;
}

/* =================================================================
   2. BUG FIXES
================================================================= */

/*
 * FIX: Language selector flag alignment issue in modal.
 * The inline-block style and vertical alignment were causing layout shifts.
 * This ensures the flag is properly aligned with the text.
 */
#modalChooseLanguage .iti-flag {
    margin-right: 8px;
    transform: translateY(-1px);
}

/* =================================================================
   3. GENERAL UI ENHANCEMENTS
================================================================= */
body {
    font-family: 'Poppins', sans-serif; /* A more modern font, assuming it's available or imported */
    color: var(--c1v-text-primary);
}

.btn {
    border-radius: var(--c1v-border-radius);
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--c1v-orange-primary);
    border-color: var(--c1v-orange-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--c1v-orange-dark);
    border-color: var(--c1v-orange-dark);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.card {
    border-radius: var(--c1v-border-radius);
    box-shadow: var(--c1v-box-shadow);
    border: 1px solid var(--c1v-border-color);
}

/* =================================================================
   4. HEADER & NAVIGATION
================================================================= */
.header .navbar {
    background-color: #ffffff;
    box-shadow: var(--c1v-box-shadow);
}

.main-navbar-wrapper {
    background-color: var(--c1v-light-gray-bg) !important;
}

#nav .nav-item .nav-link {
    color: var(--c1v-text-primary);
    font-weight: 500;
    transition: color 0.3s ease;
}

#nav .nav-item .nav-link:hover,
#nav .nav-item.active .nav-link {
    color: var(--c1v-orange-primary);
}

/* =================================================================
   5. HOMEPAGE & CLIENT AREA
================================================================= */

/* Tiles in Client Area Home */
.tile {
    border-radius: var(--c1v-border-radius);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.tile .highlight {
    transition: background-color 0.3s ease;
}

.tile:hover .highlight.bg-color-blue { background-color: var(--c1v-orange-primary) !important; }
.tile:hover .highlight.bg-color-green { background-color: var(--c1v-orange-primary) !important; }
.tile:hover .highlight.bg-color-red { background-color: var(--c1v-orange-primary) !important; }
.tile:hover .highlight.bg-color-gold { background-color: var(--c1v-orange-primary) !important; }

/* Product cards on homepage */
.product-card .card-accent {
    background: linear-gradient(90deg, var(--c1v-orange-primary), var(--c1v-orange-light));
}

.product-card .product-btn {
    background: linear-gradient(135deg, var(--c1v-orange-primary), var(--c1v-orange-dark));
}

/* =================================================================
   6. FOOTER
================================================================= */
#footer {
    background-color: #2c3e50; /* A slightly softer dark color */
}

#footer h5 {
    color: var(--c1v-orange-primary);
}

#footer a {
    transition: color 0.3s ease;
}

#footer a:hover {
    color: var(--c1v-orange-light) !important;
}