/* 
=========================================================
C2CReview Universal UI Consistency System
========================================================= 
* This file enforces a global 8px spacing system and reusable 
* components across all pages without overriding core branding.
*/

:root {
    /* Base spacing unit */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 40px;
    --spacing-xxl: 64px;
    --spacing-hero: 96px;

    /* Base Colors - Preserving existing branding */
    --brand-primary: #04c0a0;
    --brand-primary-hover: #03a88c;

    /* Layout Variables */
    --max-content-width: 1280px;
    --reading-width: 1200px;

    /* Responsive Paddings */
    --page-padding-desktop: 40px;
    --page-padding-tablet: 24px;
    --page-padding-mobile: 16px;

    /* Component Specs */
    --touch-target-min: 44px;
    --table-cell-padding: 16px;
    --table-row-height: 56px;
}

/* =========================================================
   GLOBAL LAYOUT SYSTEM
   ========================================================= */

/* Max Container */
.global-container {
    width: 100% !important;
    max-width: var(--max-content-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--page-padding-desktop) !important;
    padding-right: var(--page-padding-desktop) !important;
}

/* Reading Content */
.content-container {
    width: 100% !important;
    max-width: var(--reading-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--page-padding-desktop) !important;
    padding-right: var(--page-padding-desktop) !important;
}

@media (max-width: 991px) {

    .global-container,
    .content-container {
        padding-left: var(--page-padding-tablet) !important;
        padding-right: var(--page-padding-tablet) !important;
    }
}

@media (max-width: 576px) {

    .global-container,
    .content-container {
        padding-left: var(--page-padding-mobile) !important;
        padding-right: var(--page-padding-mobile) !important;
    }
}

/* Section Spacing */
.section-gap {
    margin-top: var(--spacing-xxl) !important;
}

.section-gap-lg {
    margin-top: 80px !important;
}

.section-gap-hero {
    margin-top: var(--spacing-hero) !important;
}

@media (max-width: 768px) {

    .section-gap,
    .section-gap-lg,
    .section-gap-hero {
        margin-top: 48px !important;
    }
}

/* =========================================================
   CARD SYSTEM
   ========================================================= */

.c2c-card,
.card,
.saas_features_item,
.agency-card,
.review-card {
    padding: var(--spacing-md) !important;
    margin-bottom: var(--spacing-md) !important;
    display: flex !important;
}

.card-body {
    padding: 5px;
}

.c2c-card-lg {
    padding: var(--spacing-lg) !important;
}

.c2c-card-title {
    margin-bottom: var(--spacing-sm) !important;
    /* 16px */
}

.review-card {
    background: #fff;
    border: 1px solid #dcfce7;
    border-left: 4px solid #04c0a0;
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 10px !important;
    transition: all 0.3s ease;
}

.c2c-card-content-group {
    margin-bottom: var(--spacing-md) !important;
    /* 24px */
}

/* =========================================================
   DASHBOARD LAYOUT (Agency & Client Identical)
   ========================================================= */

.dashboard-header {
    margin-bottom: var(--spacing-lg) !important;
    /* 32px */
}

.stats-card-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--spacing-md) !important;
    /* 24px */
}

.dashboard-section {
    margin-bottom: var(--spacing-xl) !important;
    /* 40px */
}

.widget-gap,
.chart-wrapper,
.quick-actions {
    margin-bottom: var(--spacing-md) !important;
    /* 24px */
}

.dashboard-table-wrapper {
    margin-bottom: var(--spacing-lg) !important;
    /* 32px */
}

/* =========================================================
   FORMS
   ========================================================= */

.c2c-form-label,
label,
.control-label {
    margin-bottom: var(--spacing-xs) !important;
    /* 8px */
    display: block !important;
}

.c2c-form-field {
    margin-bottom: var(--spacing-md) !important;
    /* 24px */
}

.c2c-form-group {
    margin-bottom: var(--spacing-lg) !important;
    /* 32px */
}

.c2c-form-section {
    margin-bottom: 48px !important;
}

.c2c-form-actions {
    margin-top: var(--spacing-lg) !important;
    /* 32px */
}

.c2c-checkbox-group,
.c2c-radio-group {
    margin-bottom: 12px !important;
}

.validation-message,
.invalid-feedback {
    margin-top: var(--spacing-xs) !important;
    /* 8px */
}

/* =========================================================
   BUTTONS (Only 3 Reusable Variants)
   ========================================================= */

/* Base Button Properties */
.btn-primary-c2c,
.btn-secondary-c2c,
.btn-tertiary-c2c,
.btn_get,
.action_btn,
.theme_btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 24px !important;
    min-height: var(--touch-target-min) !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    /* Inheriting existing radius feel */
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
    text-align: center !important;
}

@media (max-width: 576px) {
    .btn-mobile-full {
        width: 100% !important;
    }
}

/* 1. Primary Button (Save, Submit, Purchase) */
.btn-primary-c2c,
.btn_get,
.theme_btn,
.btn-primary {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
    border: 1px solid var(--brand-primary) !important;
}

.btn-primary-c2c:hover,
.btn_get:hover,
.theme_btn:hover,
.btn-primary:hover {
    background-color: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

/* 2. Secondary Button (Outlined) */
.btn-secondary-c2c,
.btn_get_two,
.btn-outline-primary {
    background-color: #fff !important;
    color: var(--brand-primary) !important;
    border: 1px solid var(--brand-primary) !important;
}

.btn-secondary-c2c:hover,
.btn_get_two:hover,
.btn-outline-primary:hover {
    background-color: rgba(4, 192, 160, 0.05) !important;
    color: var(--brand-primary-hover) !important;
}

/* 3. Tertiary Button (Ghost) */
.btn-tertiary-c2c,
.btn-link {
    background-color: transparent !important;
    color: var(--brand-primary) !important;
    border: 1px solid transparent !important;
    padding: 8px 16px !important;
}

.btn-tertiary-c2c:hover,
.btn-link:hover {
    background-color: rgba(4, 192, 160, 0.05) !important;
}

/* =========================================================
   TABLES
   ========================================================= */

.c2c-table,
.table {
    margin-top: var(--spacing-lg) !important;
    /* 32px */
    margin-bottom: var(--spacing-lg) !important;
    /* 32px */
    width: 100% !important;
}

.c2c-table th,
.c2c-table td,
.table th,
.table td {
    padding: var(--table-cell-padding) !important;
    /* 16px */
    height: var(--table-row-height) !important;
    /* 56px */
    vertical-align: middle !important;
}

.c2c-pagination,
.pagination {
    margin-top: var(--spacing-md) !important;
    /* 24px */
}

/* =========================================================
   SEARCH & FILTERS
   ========================================================= */

.search-bar-wrapper {
    margin-bottom: var(--spacing-md) !important;
    /* 24px */
}

.filter-panel {
    display: flex !important;
    gap: var(--spacing-sm) !important;
    /* 16px */
    margin-bottom: var(--spacing-md) !important;
}

.filter-group {
    margin-bottom: var(--spacing-md) !important;
    /* 24px */
}

.search-results-section {
    margin-top: var(--spacing-lg) !important;
    /* 32px */
}

/* =========================================================
   LISTS & COLLECTIONS
   ========================================================= */

.card-list,
.article-list,
.agency-list {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-md) !important;
    /* 24px */
}

.review-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.comment-list {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-sm) !important;
    /* 16px */
}

/* =========================================================
   MODALS & POPUPS
   ========================================================= */

.modal-content,
.popup-content {
    padding: var(--spacing-lg) !important;
    /* 32px */
}

.modal-section {
    margin-bottom: var(--spacing-md) !important;
    /* 24px */
}

.modal-footer-actions {
    margin-top: var(--spacing-md) !important;
    /* 24px */
    display: flex !important;
    gap: var(--spacing-sm) !important;
    /* 16px */
}

/* =========================================================
   SIDEBAR & HEADER
   ========================================================= */

.sidebar-menu-item {
    padding: 12px var(--spacing-sm) !important;
    min-height: var(--touch-target-min) !important;
    display: flex !important;
    align-items: center !important;
}

.sidebar-group {
    margin-bottom: var(--spacing-md) !important;
    /* 24px */
}

.sidebar-logo-area {
    margin-bottom: var(--spacing-lg) !important;
    /* 32px */
}

.header-nav-list {
    gap: var(--spacing-lg) !important;
    /* 32px */
}

.header-cta-group {
    display: flex !important;
    gap: var(--spacing-sm) !important;
    /* 16px */
    justify-content: flex-end !important;
}

.c2c-breadcrumb {
    margin-top: var(--spacing-md) !important;
    /* 24px */
    margin-bottom: var(--spacing-md) !important;
    /* 24px */
}

/* =========================================================
   PROFILE PAGES (Identical spacing for all roles)
   ========================================================= */

.profile-header {
    margin-bottom: var(--spacing-lg) !important;
    /* 32px */
}

.profile-tabs-nav {
    margin-top: var(--spacing-md) !important;
    /* 24px */
    display: flex !important;
    gap: var(--spacing-sm) !important;
    /* 16px */
}

.profile-content-section {
    margin-bottom: 48px !important;
}

.profile-tab-content {
    padding: var(--spacing-lg) !important;
    /* 32px */
}

/* =========================================================
   EMPTY STATES
   ========================================================= */

.empty-state {
    padding: var(--spacing-xxl) !important;
    /* 64px */
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.empty-state-title {
    margin-top: var(--spacing-sm) !important;
    /* 16px */
    margin-bottom: var(--spacing-sm) !important;
    /* 16px */
}

.empty-state-desc {
    margin-bottom: var(--spacing-sm) !important;
    /* 16px */
}

.empty-state-cta {
    margin-top: var(--spacing-md) !important;
    /* 24px */
}