/* =====================================================
   SmartSurvey Design System
   Version 1.1
   ===================================================== */

/* =====================================================
   Variables
   ===================================================== */

:root {

    /* Colors */

    --primary: #2563EB;
    --primary-dark: #1D4ED8;

    --success: #22C55E;
    --warning: #F59E0B;
    --danger: #EF4444;

    --background: #F5F7FB;
    --surface: #FFFFFF;

    --border: #E5E7EB;

    --text: #1F2937;
    --text-light: #6B7280;

    /* Radius */

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;

    /* Shadow */

    --shadow-sm: 0 2px 8px rgba(0,0,0,.05);
    --shadow: 0 6px 18px rgba(0,0,0,.08);
    --shadow-lg: 0 12px 30px rgba(0,0,0,.12);

    /* Spacing */

    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 30px;
    --space-xl: 45px;

    /* Animation */

    --transition: .25s;

}


/* =====================================================
   Reset
   ===================================================== */

*,
*::before,
*::after {

    box-sizing: border-box;

    transition:
        background-color .2s,
        border-color .2s,
        color .2s,
        box-shadow .2s;

}


/* =====================================================
   Base
   ===================================================== */

html {

    font-size:16px;

}

body {

    margin:0;
    padding:0;

    font-family:Assistant, Arial, sans-serif;

    background:var(--background);

    color:var(--text);

}


/* =====================================================
   Layout
   ===================================================== */

.ss-page {

    direction:rtl;

    min-height:100vh;

}

.ss-container {

    width:100%;

    max-width:1500px;

    margin:auto;

    padding:25px;

}


/* =====================================================
   Cards
   ===================================================== */

.ss-card {

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:25px;

    margin-bottom:25px;

}

.ss-card-title {

    margin:0 0 20px;

    font-size:22px;

    font-weight:700;

    color:var(--text);

}

.ss-card-subtitle{

    margin-top:-10px;

    margin-bottom:25px;

    color:var(--text-light);

    font-size:14px;

}


/* =====================================================
   Buttons
   ===================================================== */

.ss-btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 130px;
    height: 44px;

    padding: 0 20px;

    border: 1px solid transparent;
    border-radius: var(--radius-sm);

    font-size: 15px;
    font-weight: 600;

    text-decoration: none;
    cursor: pointer;

    transition: var(--transition);

}

.ss-btn:hover {

    transform: translateY(-1px);

}

.ss-btn-primary {

    background: var(--primary);
    color: #fff;

}

.ss-btn-primary:hover {

    background: var(--primary-dark);

}

.ss-btn-success {

    background: var(--success);
    color: #fff;

}

.ss-btn-success:hover {

    filter: brightness(.95);

}

.ss-btn-outline {

    background: #fff;
    color: var(--primary);

    border-color: var(--primary);

}

.ss-btn-outline:hover {

    background: var(--primary);

    color: #fff;

}


/* =====================================================
   Inputs
   ===================================================== */

.ss-input,
.ss-select,
.ss-textarea {

    width: 100%;

    padding: 12px 14px;

    border: 1px solid var(--border);

    border-radius: var(--radius-sm);

    background: #fff;

    color: var(--text);

    font-size: 15px;

    outline: none;

}

.ss-input:focus,
.ss-select:focus,
.ss-textarea:focus {

    border-color: var(--primary);

    box-shadow: 0 0 0 3px rgba(37,99,235,.12);

}

.ss-textarea {

    resize: vertical;

    min-height: 120px;

}


/* =====================================================
   Labels
   ===================================================== */

.ss-label {

    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 600;

    color: var(--text);

}


/* =====================================================
   Form Groups
   ===================================================== */

.ss-form-group {

    margin-bottom: 20px;

}


/* =====================================================
   Grid
   ===================================================== */

.ss-row {

    display: flex;

    flex-wrap: wrap;

    margin-right: -10px;
    margin-left: -10px;

}

.ss-col {

    padding: 10px;

    flex: 1;

}

.ss-col-2 {

    width: 50%;

    padding: 10px;

}

.ss-col-3 {

    width: 33.3333%;

    padding: 10px;

}

.ss-col-4 {

    width: 25%;

    padding: 10px;

}


/* =====================================================
   Badges
   ===================================================== */

.ss-badge {

    display: inline-block;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 600;

}

.ss-badge-success {

    background: #DCFCE7;

    color: #166534;

}

.ss-badge-warning {

    background: #FEF3C7;

    color: #92400E;

}

.ss-badge-danger {

    background: #FEE2E2;

    color: #991B1B;

}

.ss-badge-primary {

    background: #DBEAFE;

    color: #1E40AF;

}


/* =====================================================
   Responsive
   ===================================================== */

@media (max-width: 768px) {

    .ss-col-2,
    .ss-col-3,
    .ss-col-4 {

        width: 100%;

    }

    .ss-btn {

        width: 100%;

    }

}


/* =====================================================
   Section Header
   ===================================================== */

.ss-section {

    margin-bottom: 30px;

}

.ss-section-title {

    margin: 0 0 8px;

    font-size: 20px;

    font-weight: 700;

    color: var(--text);

}

.ss-section-subtitle {

    margin-bottom: 25px;

    color: var(--text-light);

    font-size: 14px;

}

/* =====================================================
   Divider
   ===================================================== */

.ss-divider {

    height:1px;

    background:var(--border);

    margin:30px 0;

}

/* =====================================================
   Flex Helpers
   ===================================================== */

.ss-flex {

    display:flex;

}

.ss-between {

    justify-content:space-between;

}

.ss-center {

    align-items:center;

}

.ss-gap {

    gap:20px;

}   


/* ==========================
   Cards Grid
========================== */

.ss-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 24px;
}

@media (max-width: 900px) {
    .ss-grid {
        grid-template-columns: 1fr;
    }
}

/* ======================================
   Progress
====================================== */

.ss-progress {

    height:10px;

    background:#E5E7EB;

    border-radius:999px;

    overflow:hidden;

    margin-top:20px;

}

.ss-progress-value {

    width:17%;

    height:100%;

    background:var(--primary);

    transition:width .35s;

}

/* ======================================
   Footer
====================================== */

.ss-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:35px;

}