/*! İşletmem Design System (isletmem-ds) v1.0 */

/* ============================================================
   0. GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* ============================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */
:root {
    /* ---- Brand Colors ---- */
    --im-primary: #37b24d;
    --im-primary-light: #40c057;
    --im-primary-dark: #2f9e44;
    --im-primary-darker: #2b8a3e;

    /* ---- Dark Greens (Footer) ---- */
    --im-footer-bg: #2e3b25;
    --im-footer-dark: #242f1d;

    /* ============================================
       OPEN COLOR PALETTE (13 families × 10 shades)
       ============================================ */

    /* Gray */
    --oc-gray-0: #f8f9fa;
    --oc-gray-1: #f1f3f5;
    --oc-gray-2: #e9ecef;
    --oc-gray-3: #dee2e6;
    --oc-gray-4: #ced4da;
    --oc-gray-5: #adb5bd;
    --oc-gray-6: #868e96;
    --oc-gray-7: #495057;
    --oc-gray-8: #343a40;
    --oc-gray-9: #212529;

    /* Red */
    --oc-red-0: #fff5f5;
    --oc-red-1: #ffe3e3;
    --oc-red-2: #ffc9c9;
    --oc-red-3: #ffa8a8;
    --oc-red-4: #ff8787;
    --oc-red-5: #ff6b6b;
    --oc-red-6: #fa5252;
    --oc-red-7: #f03e3e;
    --oc-red-8: #e03131;
    --oc-red-9: #c92a2a;

    /* Pink */
    --oc-pink-0: #fff0f6;
    --oc-pink-1: #ffdeeb;
    --oc-pink-2: #fcc2d7;
    --oc-pink-3: #faa2c1;
    --oc-pink-4: #f783ac;
    --oc-pink-5: #f06595;
    --oc-pink-6: #e64980;
    --oc-pink-7: #d6336c;
    --oc-pink-8: #c2255c;
    --oc-pink-9: #a61e4d;

    /* Grape */
    --oc-grape-0: #f8f0fc;
    --oc-grape-1: #f3d9fa;
    --oc-grape-2: #eebefa;
    --oc-grape-3: #e599f7;
    --oc-grape-4: #da77f2;
    --oc-grape-5: #cc5de8;
    --oc-grape-6: #be4bdb;
    --oc-grape-7: #ae3ec9;
    --oc-grape-8: #9c36b5;
    --oc-grape-9: #862e9c;

    /* Violet */
    --oc-violet-0: #f3f0ff;
    --oc-violet-1: #e5dbff;
    --oc-violet-2: #d0bfff;
    --oc-violet-3: #b197fc;
    --oc-violet-4: #9775fa;
    --oc-violet-5: #845ef7;
    --oc-violet-6: #7950f2;
    --oc-violet-7: #7048e8;
    --oc-violet-8: #6741d9;
    --oc-violet-9: #5f3dc4;

    /* Indigo */
    --oc-indigo-0: #edf2ff;
    --oc-indigo-1: #dbe4ff;
    --oc-indigo-2: #bac8ff;
    --oc-indigo-3: #91a7ff;
    --oc-indigo-4: #748ffc;
    --oc-indigo-5: #5c7cfa;
    --oc-indigo-6: #4c6ef5;
    --oc-indigo-7: #4263eb;
    --oc-indigo-8: #3b5bdb;
    --oc-indigo-9: #364fc7;

    /* Blue */
    --oc-blue-0: #e7f5ff;
    --oc-blue-1: #d0ebff;
    --oc-blue-2: #a5d8ff;
    --oc-blue-3: #74c0fc;
    --oc-blue-4: #4dabf7;
    --oc-blue-5: #339af0;
    --oc-blue-6: #228be6;
    --oc-blue-7: #1c7ed6;
    --oc-blue-8: #1971c2;
    --oc-blue-9: #1864ab;

    /* Cyan */
    --oc-cyan-0: #e3fafc;
    --oc-cyan-1: #c5f6fa;
    --oc-cyan-2: #99e9f2;
    --oc-cyan-3: #66d9e8;
    --oc-cyan-4: #3bc9db;
    --oc-cyan-5: #22b8cf;
    --oc-cyan-6: #15aabf;
    --oc-cyan-7: #1098ad;
    --oc-cyan-8: #0c8599;
    --oc-cyan-9: #0b7285;

    /* Teal */
    --oc-teal-0: #e6fcf5;
    --oc-teal-1: #c3fae8;
    --oc-teal-2: #96f2d7;
    --oc-teal-3: #63e6be;
    --oc-teal-4: #38d9a9;
    --oc-teal-5: #20c997;
    --oc-teal-6: #12b886;
    --oc-teal-7: #0ca678;
    --oc-teal-8: #099268;
    --oc-teal-9: #087f5b;

    /* Green */
    --oc-green-0: #ebfbee;
    --oc-green-1: #d3f9d8;
    --oc-green-2: #b2f2bb;
    --oc-green-3: #8ce99a;
    --oc-green-4: #69db7c;
    --oc-green-5: #51cf66;
    --oc-green-6: #40c057;
    --oc-green-7: #37b24d;
    --oc-green-8: #2f9e44;
    --oc-green-9: #2b8a3e;

    /* Lime */
    --oc-lime-0: #f4fce3;
    --oc-lime-1: #e9fac8;
    --oc-lime-2: #d8f5a2;
    --oc-lime-3: #c0eb75;
    --oc-lime-4: #a9e34b;
    --oc-lime-5: #94d82d;
    --oc-lime-6: #82c91e;
    --oc-lime-7: #74b816;
    --oc-lime-8: #66a80f;
    --oc-lime-9: #5c940d;

    /* Yellow */
    --oc-yellow-0: #fff9db;
    --oc-yellow-1: #fff3bf;
    --oc-yellow-2: #ffec99;
    --oc-yellow-3: #ffe066;
    --oc-yellow-4: #ffd43b;
    --oc-yellow-5: #fcc419;
    --oc-yellow-6: #fab005;
    --oc-yellow-7: #f59f00;
    --oc-yellow-8: #f08c00;
    --oc-yellow-9: #e67700;

    /* Orange */
    --oc-orange-0: #fff4e6;
    --oc-orange-1: #ffe8cc;
    --oc-orange-2: #ffd8a8;
    --oc-orange-3: #ffc078;
    --oc-orange-4: #ffa94d;
    --oc-orange-5: #ff922b;
    --oc-orange-6: #fd7e14;
    --oc-orange-7: #f76707;
    --oc-orange-8: #e8590c;
    --oc-orange-9: #d9480f;

    /* ---- Neutrals (mapped to Open Color Gray) ---- */
    --im-white: #ffffff;
    --im-black: #212529;
    --im-gray-50: var(--oc-gray-0);
    --im-gray-100: var(--oc-gray-1);
    --im-gray-200: var(--oc-gray-2);
    --im-gray-300: var(--oc-gray-3);
    --im-gray-400: var(--oc-gray-4);
    --im-gray-500: var(--oc-gray-5);
    --im-gray-600: var(--oc-gray-6);
    --im-gray-700: var(--oc-gray-7);
    --im-gray-800: var(--oc-gray-8);
    --im-gray-900: var(--oc-gray-9);

    /* ---- Semantic Colors ---- */
    --im-success: var(--oc-teal-6);
    --im-success-light: var(--oc-teal-0);
    --im-success-dark: var(--oc-teal-8);
    --im-info: var(--oc-blue-6);
    --im-info-light: var(--oc-blue-0);
    --im-info-dark: var(--oc-blue-8);
    --im-warning: var(--oc-yellow-6);
    --im-warning-light: var(--oc-yellow-0);
    --im-warning-dark: var(--oc-yellow-8);
    --im-danger: var(--oc-red-6);
    --im-danger-light: var(--oc-red-0);
    --im-danger-dark: var(--oc-red-8);

    /* ---- Semantic UI ---- */
    --im-body-bg: var(--oc-gray-2);
    --im-body-text: var(--im-black);
    --im-link: var(--im-primary);
    --im-link-hover: var(--im-primary-dark);

    /* ---- Typography ---- */
    --im-font-family: 'PT Sans', Arial, Helvetica, sans-serif;
    --im-font-base: 16px;
    --im-line-height: 1.5;

    --im-text-xs: 0.75rem;
    /* 12px */
    --im-text-sm: 0.875rem;
    /* 14px */
    --im-text-base: 1rem;
    /* 16px */
    --im-text-lg: 1.125rem;
    /* 18px */
    --im-text-xl: 1.25rem;
    /* 20px */
    --im-text-2xl: 1.5rem;
    /* 24px */
    --im-text-3xl: 1.875rem;
    /* 30px */
    --im-text-4xl: 2.25rem;
    /* 36px */
    --im-text-5xl: 3rem;
    /* 48px */

    --im-fw-normal: 400;
    --im-fw-bold: 700;

    /* ---- Spacing (4px base) ---- */
    --im-space-0: 0;
    --im-space-1: 0.25rem;
    /* 4px */
    --im-space-2: 0.5rem;
    /* 8px */
    --im-space-3: 0.75rem;
    /* 12px */
    --im-space-4: 1rem;
    /* 16px */
    --im-space-5: 1.25rem;
    /* 20px */
    --im-space-6: 1.5rem;
    /* 24px */
    --im-space-7: 1.75rem;
    /* 28px */
    --im-space-8: 2rem;
    /* 32px */
    --im-space-10: 2.5rem;
    /* 40px */
    --im-space-12: 3rem;
    /* 48px */
    --im-space-14: 3.5rem;
    /* 56px */
    --im-space-16: 4rem;
    /* 64px */
    --im-space-20: 5rem;
    /* 80px */
    --im-space-24: 6rem;
    /* 96px */

    /* ---- Border Radius ---- */
    --im-radius-none: 0;
    --im-radius-sm: 0.25rem;
    /* 4px */
    --im-radius: 0.5rem;
    /* 8px */
    --im-radius-md: 0.75rem;
    /* 12px */
    --im-radius-lg: 1rem;
    /* 16px */
    --im-radius-xl: 1.5rem;
    /* 24px */
    --im-radius-2xl: 2rem;
    /* 32px */
    --im-radius-pill: 9999px;
    --im-radius-full: 50%;

    /* ---- Shadows ---- */
    --im-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
    --im-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    --im-shadow-md: 0 4px 6px rgba(0, 0, 0, .1);
    --im-shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);
    --im-shadow-xl: 0 20px 25px rgba(0, 0, 0, .1);

    /* ---- Container ---- */
    --im-container-sm: 640px;
    --im-container-md: 768px;
    --im-container-lg: 1024px;
    --im-container-xl: 1200px;
    --im-container-xxl: 1400px;
    --im-container-px: var(--im-space-6);

    /* ---- Transitions ---- */
    --im-transition-fast: 150ms ease;
    --im-transition: 250ms ease;
    --im-transition-slow: 400ms ease;

    /* ---- Z-index ---- */
    --im-z-dropdown: 100;
    --im-z-sticky: 200;
    --im-z-header: 300;
    --im-z-overlay: 400;
    --im-z-modal: 500;
}


/* ============================================================
   2. CSS RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--im-font-base);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--im-font-family);
    font-weight: var(--im-fw-normal);
    font-size: var(--im-text-base);
    line-height: var(--im-line-height);
    color: var(--im-body-text);
    background-color: var(--im-body-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--im-transition-fast),
        opacity var(--im-transition-fast);
}

a:hover {
    opacity: 0.8;
}

ul,
ol {
    list-style: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
    border: none;
    outline: none;
    background: none;
}

button {
    cursor: pointer;
}


/* ============================================================
   3. LAYOUT SYSTEM
   ============================================================ */

/* Container */
.im-container {
    width: 100%;
    max-width: var(--im-container-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--im-container-px);
    padding-right: var(--im-container-px);
}

.im-container--sm {
    max-width: var(--im-container-sm);
}

.im-container--md {
    max-width: var(--im-container-md);
}

.im-container--lg {
    max-width: var(--im-container-lg);
}

.im-container--xl {
    max-width: var(--im-container-xl);
}

.im-container--xxl {
    max-width: var(--im-container-xxl);
}

.im-container--fluid {
    max-width: 100%;
}

/* CSS Grid Layout — 12 column */
.im-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--im-space-6);
}

.im-col-1 {
    grid-column: span 1;
}

.im-col-2 {
    grid-column: span 2;
}

.im-col-3 {
    grid-column: span 3;
}

.im-col-4 {
    grid-column: span 4;
}

.im-col-5 {
    grid-column: span 5;
}

.im-col-6 {
    grid-column: span 6;
}

.im-col-7 {
    grid-column: span 7;
}

.im-col-8 {
    grid-column: span 8;
}

.im-col-9 {
    grid-column: span 9;
}

.im-col-10 {
    grid-column: span 10;
}

.im-col-11 {
    grid-column: span 11;
}

.im-col-12 {
    grid-column: span 12;
}


/* ============================================================
   4. FLEXBOX UTILITIES
   ============================================================ */
.im-flex {
    display: flex;
}

.im-inline-flex {
    display: inline-flex;
}

.im-flex-row {
    flex-direction: row;
}

.im-flex-col {
    flex-direction: column;
}

.im-flex-wrap {
    flex-wrap: wrap;
}

.im-flex-nowrap {
    flex-wrap: nowrap;
}

.im-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.im-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.im-flex-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.im-flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.im-items-start {
    align-items: flex-start;
}

.im-items-center {
    align-items: center;
}

.im-items-end {
    align-items: flex-end;
}

.im-items-stretch {
    align-items: stretch;
}

.im-justify-start {
    justify-content: flex-start;
}

.im-justify-center {
    justify-content: center;
}

.im-justify-end {
    justify-content: flex-end;
}

.im-justify-between {
    justify-content: space-between;
}

.im-justify-around {
    justify-content: space-around;
}

.im-flex-1 {
    flex: 1 1 0%;
}

.im-flex-auto {
    flex: 1 1 auto;
}

.im-flex-none {
    flex: none;
}

.im-flex-grow {
    flex-grow: 1;
}

.im-flex-shrink-0 {
    flex-shrink: 0;
}


/* ============================================================
   5. SPACING UTILITIES
   ============================================================ */

/* Gap */
.im-gap-0 {
    gap: 0;
}

.im-gap-1 {
    gap: var(--im-space-1);
}

.im-gap-2 {
    gap: var(--im-space-2);
}

.im-gap-3 {
    gap: var(--im-space-3);
}

.im-gap-4 {
    gap: var(--im-space-4);
}

.im-gap-5 {
    gap: var(--im-space-5);
}

.im-gap-6 {
    gap: var(--im-space-6);
}

.im-gap-8 {
    gap: var(--im-space-8);
}

.im-gap-10 {
    gap: var(--im-space-10);
}

.im-gap-12 {
    gap: var(--im-space-12);
}

/* Padding */
.im-p-0 {
    padding: 0;
}

.im-p-1 {
    padding: var(--im-space-1);
}

.im-p-2 {
    padding: var(--im-space-2);
}

.im-p-3 {
    padding: var(--im-space-3);
}

.im-p-4 {
    padding: var(--im-space-4);
}

.im-p-5 {
    padding: var(--im-space-5);
}

.im-p-6 {
    padding: var(--im-space-6);
}

.im-p-8 {
    padding: var(--im-space-8);
}

.im-p-10 {
    padding: var(--im-space-10);
}

.im-p-12 {
    padding: var(--im-space-12);
}

.im-p-16 {
    padding: var(--im-space-16);
}

.im-px-0 {
    padding-left: 0;
    padding-right: 0;
}

.im-px-2 {
    padding-left: var(--im-space-2);
    padding-right: var(--im-space-2);
}

.im-px-3 {
    padding-left: var(--im-space-3);
    padding-right: var(--im-space-3);
}

.im-px-4 {
    padding-left: var(--im-space-4);
    padding-right: var(--im-space-4);
}

.im-px-5 {
    padding-left: var(--im-space-5);
    padding-right: var(--im-space-5);
}

.im-px-6 {
    padding-left: var(--im-space-6);
    padding-right: var(--im-space-6);
}

.im-px-8 {
    padding-left: var(--im-space-8);
    padding-right: var(--im-space-8);
}

.im-px-10 {
    padding-left: var(--im-space-10);
    padding-right: var(--im-space-10);
}

.im-px-12 {
    padding-left: var(--im-space-12);
    padding-right: var(--im-space-12);
}

.im-px-16 {
    padding-left: var(--im-space-16);
    padding-right: var(--im-space-16);
}

.im-py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.im-py-1 {
    padding-top: var(--im-space-1);
    padding-bottom: var(--im-space-1);
}

.im-py-2 {
    padding-top: var(--im-space-2);
    padding-bottom: var(--im-space-2);
}

.im-py-3 {
    padding-top: var(--im-space-3);
    padding-bottom: var(--im-space-3);
}

.im-py-4 {
    padding-top: var(--im-space-4);
    padding-bottom: var(--im-space-4);
}

.im-py-5 {
    padding-top: var(--im-space-5);
    padding-bottom: var(--im-space-5);
}

.im-py-6 {
    padding-top: var(--im-space-6);
    padding-bottom: var(--im-space-6);
}

.im-py-8 {
    padding-top: var(--im-space-8);
    padding-bottom: var(--im-space-8);
}

.im-py-10 {
    padding-top: var(--im-space-10);
    padding-bottom: var(--im-space-10);
}

.im-py-12 {
    padding-top: var(--im-space-12);
    padding-bottom: var(--im-space-12);
}

.im-pt-0 {
    padding-top: 0;
}

.im-pt-2 {
    padding-top: var(--im-space-2);
}

.im-pt-4 {
    padding-top: var(--im-space-4);
}

.im-pt-6 {
    padding-top: var(--im-space-6);
}

.im-pt-8 {
    padding-top: var(--im-space-8);
}

.im-pb-0 {
    padding-bottom: 0;
}

.im-pb-2 {
    padding-bottom: var(--im-space-2);
}

.im-pb-4 {
    padding-bottom: var(--im-space-4);
}

.im-pb-6 {
    padding-bottom: var(--im-space-6);
}

.im-pb-8 {
    padding-bottom: var(--im-space-8);
}

/* Margin */
.im-m-0 {
    margin: 0;
}

.im-m-auto {
    margin: auto;
}

.im-mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.im-my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

.im-m-1 {
    margin: var(--im-space-1);
}

.im-m-2 {
    margin: var(--im-space-2);
}

.im-m-3 {
    margin: var(--im-space-3);
}

.im-m-4 {
    margin: var(--im-space-4);
}

.im-m-6 {
    margin: var(--im-space-6);
}

.im-m-8 {
    margin: var(--im-space-8);
}

.im-mt-0 {
    margin-top: 0;
}

.im-mt-1 {
    margin-top: var(--im-space-1);
}

.im-mt-2 {
    margin-top: var(--im-space-2);
}

.im-mt-3 {
    margin-top: var(--im-space-3);
}

.im-mt-4 {
    margin-top: var(--im-space-4);
}

.im-mt-6 {
    margin-top: var(--im-space-6);
}

.im-mt-8 {
    margin-top: var(--im-space-8);
}

.im-mt-10 {
    margin-top: var(--im-space-10);
}

.im-mt-12 {
    margin-top: var(--im-space-12);
}

.im-mb-0 {
    margin-bottom: 0;
}

.im-mb-1 {
    margin-bottom: var(--im-space-1);
}

.im-mb-2 {
    margin-bottom: var(--im-space-2);
}

.im-mb-3 {
    margin-bottom: var(--im-space-3);
}

.im-mb-4 {
    margin-bottom: var(--im-space-4);
}

.im-mb-6 {
    margin-bottom: var(--im-space-6);
}

.im-mb-8 {
    margin-bottom: var(--im-space-8);
}

.im-ml-auto {
    margin-left: auto;
}

.im-mr-auto {
    margin-right: auto;
}

.im-mr-2 {
    margin-right: var(--im-space-2);
}

.im-mr-3 {
    margin-right: var(--im-space-3);
}

.im-mr-4 {
    margin-right: var(--im-space-4);
}

.im-mr-6 {
    margin-right: var(--im-space-6);
}

.im-ml-2 {
    margin-left: var(--im-space-2);
}

.im-ml-3 {
    margin-left: var(--im-space-3);
}

.im-ml-4 {
    margin-left: var(--im-space-4);
}

.im-ml-6 {
    margin-left: var(--im-space-6);
}


/* ============================================================
   6. TYPOGRAPHY UTILITIES
   ============================================================ */
.im-text-xs {
    font-size: var(--im-text-xs);
}

.im-text-sm {
    font-size: var(--im-text-sm);
}

.im-text-base {
    font-size: var(--im-text-base);
}

.im-text-lg {
    font-size: var(--im-text-lg);
}

.im-text-xl {
    font-size: var(--im-text-xl);
}

.im-text-2xl {
    font-size: var(--im-text-2xl);
}

.im-text-3xl {
    font-size: var(--im-text-3xl);
}

.im-text-4xl {
    font-size: var(--im-text-4xl);
}

.im-text-5xl {
    font-size: var(--im-text-5xl);
}

.im-fw-normal {
    font-weight: var(--im-fw-normal);
}

.im-fw-bold {
    font-weight: var(--im-fw-bold);
}

.im-fs-italic {
    font-style: italic;
}

.im-text-left {
    text-align: left;
}

.im-text-center {
    text-align: center;
}

.im-text-right {
    text-align: right;
}

.im-text-upper {
    text-transform: uppercase;
}

.im-text-lower {
    text-transform: lowercase;
}

.im-text-cap {
    text-transform: capitalize;
}

.im-text-no-wrap {
    white-space: nowrap;
}

.im-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.im-leading-none {
    line-height: 1;
}

.im-leading-tight {
    line-height: 1.25;
}

.im-leading-normal {
    line-height: 1.5;
}

.im-leading-loose {
    line-height: 1.75;
}

.im-tracking-tight {
    letter-spacing: -0.025em;
}

.im-tracking-normal {
    letter-spacing: 0;
}

.im-tracking-wide {
    letter-spacing: 0.05em;
}


/* ============================================================
   7. COLOR UTILITIES
   ============================================================ */

/* Text colors */
.im-text-white {
    color: var(--im-white);
}

.im-text-black {
    color: var(--im-black);
}

.im-text-primary {
    color: var(--im-primary);
}

.im-text-green {
    color: var(--im-primary);
}

.im-text-green-light {
    color: var(--im-green-400);
}

.im-text-green-dark {
    color: var(--im-green-800);
}

.im-text-gray {
    color: var(--im-gray-500);
}

.im-text-gray-300 {
    color: var(--im-gray-300);
}

.im-text-gray-600 {
    color: var(--im-gray-600);
}

.im-text-muted {
    color: var(--im-gray-400);
}

.im-text-inherit {
    color: inherit;
}

/* Background colors */
.im-bg-white {
    background-color: var(--im-white);
}

.im-bg-black {
    background-color: var(--im-black);
}

.im-bg-primary {
    background-color: var(--im-primary);
}

.im-bg-green {
    background-color: var(--im-primary);
}

.im-bg-green-light {
    background-color: var(--im-primary-light);
}

.im-bg-green-dark {
    background-color: var(--im-primary-dark);
}

.im-bg-dark-green {
    background-color: var(--im-footer-bg);
}

.im-bg-dark-green-deep {
    background-color: var(--im-footer-dark);
}

.im-bg-gray-50 {
    background-color: var(--im-gray-50);
}

.im-bg-gray-100 {
    background-color: var(--im-gray-100);
}

.im-bg-gray-200 {
    background-color: var(--im-gray-200);
}

.im-bg-gray-300 {
    background-color: var(--im-gray-300);
}

.im-bg-light {
    background-color: var(--im-gray-100);
}

.im-bg-body {
    background-color: var(--im-body-bg);
}

.im-bg-transparent {
    background-color: transparent;
}


/* ============================================================
   8. DISPLAY UTILITIES
   ============================================================ */
.im-d-none {
    display: none;
}

.im-d-block {
    display: block;
}

.im-d-inline {
    display: inline;
}

.im-d-inline-block {
    display: inline-block;
}

.im-d-flex {
    display: flex;
}

.im-d-inline-flex {
    display: inline-flex;
}

.im-d-grid {
    display: grid;
}

.im-visible {
    visibility: visible;
}

.im-invisible {
    visibility: hidden;
}

.im-overflow-hidden {
    overflow: hidden;
}

.im-overflow-auto {
    overflow: auto;
}

.im-overflow-visible {
    overflow: visible;
}


/* ============================================================
   9. SIZING UTILITIES
   ============================================================ */
.im-w-full {
    width: 100%;
}

.im-w-auto {
    width: auto;
}

.im-w-50 {
    width: 50%;
}

.im-h-full {
    height: 100%;
}

.im-h-auto {
    height: auto;
}

.im-h-screen {
    height: 100vh;
}

.im-min-h-screen {
    min-height: 100vh;
}


/* ============================================================
   10. BORDER & RADIUS UTILITIES
   ============================================================ */
.im-border {
    border: 1px solid var(--im-gray-300);
}

.im-border-0 {
    border: 0;
}

.im-border-t {
    border-top: 1px solid var(--im-gray-300);
}

.im-border-b {
    border-bottom: 1px solid var(--im-gray-300);
}

.im-border-white {
    border-color: var(--im-white);
}

.im-border-green {
    border-color: var(--im-primary);
}

.im-rounded-none {
    border-radius: var(--im-radius-none);
}

.im-rounded-sm {
    border-radius: var(--im-radius-sm);
}

.im-rounded {
    border-radius: var(--im-radius);
}

.im-rounded-md {
    border-radius: var(--im-radius-md);
}

.im-rounded-lg {
    border-radius: var(--im-radius-lg);
}

.im-rounded-xl {
    border-radius: var(--im-radius-xl);
}

.im-rounded-2xl {
    border-radius: var(--im-radius-2xl);
}

.im-rounded-pill {
    border-radius: var(--im-radius-pill);
}

.im-rounded-full {
    border-radius: var(--im-radius-full);
}


/* ============================================================
   11. SHADOW UTILITIES
   ============================================================ */
.im-shadow-none {
    box-shadow: none;
}

.im-shadow-sm {
    box-shadow: var(--im-shadow-sm);
}

.im-shadow {
    box-shadow: var(--im-shadow);
}

.im-shadow-md {
    box-shadow: var(--im-shadow-md);
}

.im-shadow-lg {
    box-shadow: var(--im-shadow-lg);
}

.im-shadow-xl {
    box-shadow: var(--im-shadow-xl);
}


/* ============================================================
   12. POSITION UTILITIES
   ============================================================ */
.im-relative {
    position: relative;
}

.im-absolute {
    position: absolute;
}

.im-fixed {
    position: fixed;
}

.im-sticky {
    position: sticky;
    top: 0;
    z-index: var(--im-z-sticky);
}

.im-top-0 {
    top: 0;
}

.im-bottom-0 {
    bottom: 0;
}

.im-left-0 {
    left: 0;
}

.im-right-0 {
    right: 0;
}

.im-inset-0 {
    inset: 0;
}


/* ============================================================
   13. LOGO COMPONENT
   ============================================================ */
.im-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
}

.im-logo svg {
    height: 28px;
    width: auto;
}

.im-logo--sm svg {
    height: 20px;
}

.im-logo--md svg {
    height: 28px;
}

.im-logo--lg svg {
    height: 36px;
}

.im-logo--xl svg {
    height: 44px;
}

/* Logo color variations */
.im-logo--white svg path,
.im-logo--white svg .cls-1 {
    fill: var(--im-white);
}

.im-logo--green svg path,
.im-logo--green svg .cls-1 {
    fill: var(--im-primary);
}

.im-logo--dark svg path,
.im-logo--dark svg .cls-1 {
    fill: var(--im-black);
}


/* ============================================================
   14. ICON SYSTEM
   ============================================================ */
.im-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    line-height: 1;
}

.im-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.im-icon--sm {
    width: 16px;
    height: 16px;
}

.im-icon--md {
    width: 24px;
    height: 24px;
}

.im-icon--lg {
    width: 32px;
    height: 32px;
}

.im-icon--xl {
    width: 40px;
    height: 40px;
}

.im-icon--white {
    color: var(--im-white);
}

.im-icon--green {
    color: var(--im-primary);
}

.im-icon--dark {
    color: var(--im-black);
}

.im-icon--muted {
    color: var(--im-gray-400);
}


/* ============================================================
   15. BUTTON COMPONENTS
   ============================================================ */
.im-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--im-space-2);
    padding: var(--im-space-2) var(--im-space-5);
    font-family: var(--im-font-family);
    font-size: var(--im-text-sm);
    font-weight: var(--im-fw-bold);
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    border: 2px solid transparent;
    border-radius: var(--im-radius-sm);
    cursor: pointer;
    transition: all var(--im-transition-fast);
    text-decoration: none;
}

.im-btn:hover {
    opacity: 0.85;
}

.im-btn:active {
    opacity: 0.75;
}

/* Variants */
.im-btn--primary {
    background-color: var(--im-primary);
    color: var(--im-white);
}

.im-btn--primary:hover {
    background-color: var(--im-primary-dark);
}

.im-btn--outline {
    background-color: transparent;
    border-color: var(--im-primary);
    color: var(--im-primary);
}

.im-btn--outline:hover {
    background-color: var(--im-primary);
    color: var(--im-white);
}

.im-btn--outline-white {
    background-color: transparent;
    border-color: var(--im-white);
    color: var(--im-white);
}

.im-btn--outline-white:hover {
    background-color: var(--im-white);
    color: var(--im-primary);
}

.im-btn--white {
    background-color: var(--im-white);
    color: var(--im-primary);
}

.im-btn--ghost {
    background-color: transparent;
    color: inherit;
}

.im-btn--ghost:hover {
    background-color: rgba(255, 255, 255, .1);
}

.im-btn--dark {
    background-color: var(--im-footer-bg);
    color: var(--im-white);
}

/* Sizes */
.im-btn--xs {
    padding: var(--im-space-1) var(--im-space-3);
    font-size: var(--im-text-xs);
}

.im-btn--sm {
    padding: var(--im-space-1) var(--im-space-4);
    font-size: var(--im-text-sm);
}

.im-btn--lg {
    padding: var(--im-space-3) var(--im-space-8);
    font-size: var(--im-text-lg);
}

.im-btn--pill {
    border-radius: var(--im-radius-pill);
}

.im-btn--block {
    display: flex;
    width: 100%;
}

/* CTA Button (with logo inside — vertical: logo top, text bottom) */
.im-btn--cta {
    background-color: transparent;
    border: none;
    padding: var(--im-space-1) var(--im-space-4);
    flex-direction: column;
    gap: 2px;
    color: var(--im-white);
    font-weight: var(--im-fw-bold);
    font-style: italic;
    line-height: 1.1;
}

.im-btn--cta img,
.im-btn--cta .im-logo {
    display: block;
}

.im-btn--cta .im-cta-label {
    font-size: var(--im-text-xs);
}

/* Icon button */
.im-btn--icon {
    background: transparent;
    border: none;
    padding: var(--im-space-2);
    border-radius: var(--im-radius-full);
    color: inherit;
}

.im-btn--icon:hover {
    background-color: rgba(255, 255, 255, .15);
}


/* ============================================================
   16. NAVIGATION COMPONENT
   ============================================================ */
.im-nav {
    display: flex;
    align-items: center;
    gap: var(--im-space-1);
    list-style: none;
}

.im-nav__item {
    font-weight: var(--im-fw-bold);
    font-size: var(--im-text-base);
    padding: var(--im-space-2) var(--im-space-4);
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--im-radius-sm);
    transition: background-color var(--im-transition-fast),
        color var(--im-transition-fast);
}

.im-nav__item:hover {
    background-color: rgba(255, 255, 255, .12);
    opacity: 1;
}

.im-nav__item--active {
    background-color: rgba(255, 255, 255, .18);
}

/* Smaller variant for secondary nav */
.im-nav--sm .im-nav__item {
    font-size: var(--im-text-sm);
    font-weight: var(--im-fw-normal);
    padding: var(--im-space-1) var(--im-space-3);
}

/* Capitalized nav */
.im-nav--upper .im-nav__item {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Light theme nav (green text on white) */
.im-nav--light .im-nav__item {
    color: var(--im-primary);
}

.im-nav--light .im-nav__item:hover {
    background-color: var(--im-green-50);
}


/* ============================================================
   17. SEARCH COMPONENT
   ============================================================ */
.im-search {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 360px;
    width: 100%;
}

.im-search__input {
    width: 100%;
    padding: var(--im-space-2) var(--im-space-4);
    padding-right: var(--im-space-10);
    font-size: var(--im-text-sm);
    background-color: var(--im-white);
    border: 1px solid var(--im-gray-300);
    border-radius: var(--im-radius-sm);
    transition: border-color var(--im-transition-fast),
        box-shadow var(--im-transition-fast);
}

.im-search__input:focus {
    border-color: var(--im-primary);
    box-shadow: 0 0 0 3px rgba(74, 155, 47, 0.15);
}

.im-search__input::placeholder {
    color: var(--im-gray-400);
}

.im-search__btn {
    position: absolute;
    right: var(--im-space-1);
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--im-space-2);
    color: var(--im-gray-500);
    border-radius: var(--im-radius-sm);
    transition: color var(--im-transition-fast);
}

.im-search__btn:hover {
    color: var(--im-primary);
}

/* Rounded variant */
.im-search--rounded .im-search__input {
    border-radius: var(--im-radius-pill);
}

/* Dark variant (for green backgrounds — darker input) */
.im-search--dark .im-search__input {
    background-color: rgba(0, 0, 0, .2);
    border-color: rgba(0, 0, 0, .15);
    color: var(--im-white);
}

.im-search--dark .im-search__input::placeholder {
    color: rgba(255, 255, 255, .5);
}

.im-search--dark .im-search__btn {
    color: rgba(255, 255, 255, .7);
}


/* ============================================================
   18. HEADER COMPONENTS
   ============================================================ */

/* Base header */
.im-header {
    position: relative;
    z-index: var(--im-z-header);
    width: 100%;
}

.im-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--im-space-4);
}

.im-header__left,
.im-header__center,
.im-header__right {
    display: flex;
    align-items: center;
    gap: var(--im-space-4);
}

.im-header__left {
    justify-content: flex-start;
}

.im-header__center {
    justify-content: center;
    flex: 1;
}

.im-header__right {
    justify-content: flex-end;
}

/* --- Header Variant: Full Width (Tema 1) --- */
.im-header--full {
    background-color: var(--im-primary);
    color: var(--im-white);
}

/* --- Header Variant: Rounded/Pill (Tema 2) --- */
.im-header--rounded {
    padding: var(--im-space-4) var(--im-space-6);
}

.im-header--rounded .im-header__main {
    background-color: var(--im-primary);
    color: var(--im-white);
    border-radius: var(--im-radius-pill);
    padding: var(--im-space-3) var(--im-space-8);
}

/* --- Header Variant: Compact / Thin (Tema 3, 4) --- */
.im-header--compact {
    background-color: var(--im-primary);
    color: var(--im-white);
}

.im-header--compact .im-header__row {
    padding: var(--im-space-3) 0;
}

.im-header--compact .im-nav__item {
    font-size: var(--im-text-sm);
    padding: var(--im-space-1) var(--im-space-3);
}

/* --- Header Variant: Two Row (Tema 5, 6) --- */
.im-header--two-row {
    background-color: var(--im-primary);
    color: var(--im-white);
}

/* --- Header Variant: Light (Tema 7) — White bg, green text --- */
.im-header--light {
    background-color: var(--im-white);
    color: var(--im-primary);
    border-bottom: 1px solid var(--im-gray-200);
}

/* --- Top bar (smaller secondary row) --- */
.im-top-bar {
    padding: var(--im-space-2) 0;
    font-size: var(--im-text-sm);
}

.im-top-bar--bordered {
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}

/* --- Main header row --- */
.im-header__main {
    padding: var(--im-space-3) 0;
}


/* ============================================================
   19. FOOTER COMPONENTS
   ============================================================ */

/* Base footer */
.im-footer {
    width: 100%;
    color: var(--im-white);
}

/* Footer main area */
.im-footer__main {
    background-color: var(--im-footer-bg);
    padding: var(--im-space-12) 0;
}

/* Footer columns grid */
.im-footer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--im-space-8);
}

/* Footer info column (logo/slogan/contact) */
.im-footer__info {
    display: flex;
    flex-direction: column;
    gap: var(--im-space-4);
}

.im-footer__slogan {
    font-weight: var(--im-fw-bold);
    font-style: italic;
    font-size: var(--im-text-base);
    line-height: 1.4;
    max-width: 280px;
}

.im-footer__address {
    font-size: var(--im-text-sm);
    line-height: 1.6;
    opacity: 0.85;
}

.im-footer__phone {
    font-size: var(--im-text-2xl);
    font-weight: var(--im-fw-bold);
    letter-spacing: 0.02em;
}

/* Footer link columns */
.im-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--im-space-3);
}

.im-footer__links-title {
    font-size: var(--im-text-lg);
    font-weight: var(--im-fw-bold);
    text-transform: uppercase;
    margin-bottom: var(--im-space-2);
    letter-spacing: 0.03em;
}

.im-footer__link {
    font-size: var(--im-text-sm);
    color: var(--im-white);
    opacity: 0.85;
    transition: opacity var(--im-transition-fast);
    display: inline-block;
}

.im-footer__link:hover {
    opacity: 1;
}

/* Footer bottom bar */
.im-footer__bottom {
    background-color: var(--im-footer-dark);
    padding: var(--im-space-4) 0;
}

.im-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.im-footer__copyright {
    font-size: var(--im-text-sm);
    opacity: 0.7;
}

/* --- Footer Variant: Card / Rounded (Tema 2) --- */
.im-footer--card {
    padding: 0 var(--im-space-6);
}

.im-footer--card .im-footer__main {
    border-radius: var(--im-radius-xl);
    padding: var(--im-space-10) var(--im-space-8);
}

.im-footer--card .im-footer__bottom {
    background-color: transparent;
    border-radius: 0 0 var(--im-radius-xl) var(--im-radius-xl);
    background-color: var(--im-footer-dark);
    margin-left: 0;
    margin-right: 0;
    border-bottom-left-radius: var(--im-radius-xl);
    border-bottom-right-radius: var(--im-radius-xl);
}

/* --- Footer Variant: Minimal (Tema 4) --- */
.im-footer--minimal .im-footer__main {
    padding: var(--im-space-6) 0;
}

.im-footer--minimal .im-footer__grid {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

/* --- Footer Variant: Light (Tema 7) — Light bg, green text --- */
.im-footer--light {
    color: var(--im-primary);
}

.im-footer--light .im-footer__main {
    background-color: var(--im-gray-100);
}

.im-footer--light .im-footer__links-title {
    color: var(--im-primary);
}

.im-footer--light .im-footer__link {
    color: var(--im-primary);
}

.im-footer--light .im-footer__slogan {
    color: var(--im-primary);
}

.im-footer--light .im-footer__bottom {
    background-color: var(--im-gray-200);
    color: var(--im-primary);
}

.im-footer--light .im-footer__phone {
    color: var(--im-primary);
}


/* ============================================================
   20. SOCIAL LINKS
   ============================================================ */
.im-social {
    display: flex;
    align-items: center;
    gap: var(--im-space-3);
}

.im-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: inherit;
    opacity: 0.85;
    transition: opacity var(--im-transition-fast),
        transform var(--im-transition-fast);
}

.im-social__link:hover {
    opacity: 1;
    transform: scale(1.1);
}

.im-social__link svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}


/* ============================================================
   21. DIVIDERS / SEPARATORS
   ============================================================ */
.im-divider {
    border: none;
    border-top: 1px solid var(--im-gray-300);
    margin: var(--im-space-4) 0;
}

.im-divider--light {
    border-top-color: rgba(255, 255, 255, .15);
}

.im-divider--dark {
    border-top-color: rgba(0, 0, 0, .1);
}


/* ============================================================
   22. HERO / CONTENT AREA (Body placeholder)
   ============================================================ */
.im-main {
    min-height: 50vh;
}

.im-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: var(--im-space-12);
    text-align: center;
}


/* ============================================================
   23. CARDS
   ============================================================ */
.im-card {
    background-color: var(--im-white);
    border-radius: var(--im-radius-lg);
    box-shadow: var(--im-shadow);
    overflow: hidden;
    transition: box-shadow var(--im-transition),
        transform var(--im-transition);
}

.im-card:hover {
    box-shadow: var(--im-shadow-md);
    transform: translateY(-2px);
}

.im-card__body {
    padding: var(--im-space-6);
}

.im-card__img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.im-card__title {
    font-size: var(--im-text-xl);
    font-weight: var(--im-fw-bold);
    margin-bottom: var(--im-space-2);
}

.im-card__text {
    font-size: var(--im-text-sm);
    color: var(--im-gray-600);
}


/* ============================================================
   24. BADGES & TAGS
   ============================================================ */
.im-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--im-space-1) var(--im-space-3);
    font-size: var(--im-text-xs);
    font-weight: var(--im-fw-bold);
    border-radius: var(--im-radius-pill);
    white-space: nowrap;
}

.im-badge--primary {
    background-color: var(--im-primary);
    color: var(--im-white);
}

.im-badge--outline {
    background-color: transparent;
    border: 1px solid var(--im-primary);
    color: var(--im-primary);
}


/* ============================================================
   25. FORM ELEMENTS
   ============================================================ */
.im-input {
    width: 100%;
    padding: var(--im-space-3) var(--im-space-4);
    font-size: var(--im-text-base);
    background-color: var(--im-white);
    border: 1px solid var(--im-gray-300);
    border-radius: var(--im-radius-sm);
    transition: border-color var(--im-transition-fast),
        box-shadow var(--im-transition-fast);
}

.im-input:focus {
    border-color: var(--im-primary);
    box-shadow: 0 0 0 3px rgba(74, 155, 47, 0.15);
}

.im-label {
    display: block;
    font-size: var(--im-text-sm);
    font-weight: var(--im-fw-bold);
    margin-bottom: var(--im-space-2);
}


/* ============================================================
   26. TRANSITIONS & ANIMATIONS
   ============================================================ */
.im-transition {
    transition: all var(--im-transition);
}

.im-transition-fast {
    transition: all var(--im-transition-fast);
}

.im-transition-slow {
    transition: all var(--im-transition-slow);
}

.im-transition-none {
    transition: none;
}

@keyframes im-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes im-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes im-slide-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.im-animate-fade-in {
    animation: im-fade-in var(--im-transition) ease forwards;
}

.im-animate-slide-up {
    animation: im-slide-up var(--im-transition-slow) ease forwards;
}

.im-animate-slide-down {
    animation: im-slide-down var(--im-transition-slow) ease forwards;
}


/* ============================================================
   27. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* --- Small (≥576px) --- */
@media (min-width: 576px) {
    .im-d-sm-none {
        display: none;
    }

    .im-d-sm-block {
        display: block;
    }

    .im-d-sm-flex {
        display: flex;
    }

    .im-d-sm-grid {
        display: grid;
    }

    .im-col-sm-6 {
        grid-column: span 6;
    }

    .im-col-sm-12 {
        grid-column: span 12;
    }
}

/* --- Medium (≥768px) --- */
@media (min-width: 768px) {
    .im-d-md-none {
        display: none;
    }

    .im-d-md-block {
        display: block;
    }

    .im-d-md-flex {
        display: flex;
    }

    .im-d-md-grid {
        display: grid;
    }

    .im-d-md-inline-flex {
        display: inline-flex;
    }

    .im-col-md-3 {
        grid-column: span 3;
    }

    .im-col-md-4 {
        grid-column: span 4;
    }

    .im-col-md-6 {
        grid-column: span 6;
    }

    .im-col-md-8 {
        grid-column: span 8;
    }

    .im-col-md-12 {
        grid-column: span 12;
    }

    .im-text-md-left {
        text-align: left;
    }

    .im-text-md-right {
        text-align: right;
    }
}

/* --- Large (≥992px) --- */
@media (min-width: 992px) {
    .im-d-lg-none {
        display: none;
    }

    .im-d-lg-block {
        display: block;
    }

    .im-d-lg-flex {
        display: flex;
    }

    .im-d-lg-grid {
        display: grid;
    }

    .im-d-lg-inline-flex {
        display: inline-flex;
    }

    .im-col-lg-2 {
        grid-column: span 2;
    }

    .im-col-lg-3 {
        grid-column: span 3;
    }

    .im-col-lg-4 {
        grid-column: span 4;
    }

    .im-col-lg-5 {
        grid-column: span 5;
    }

    .im-col-lg-6 {
        grid-column: span 6;
    }

    .im-col-lg-8 {
        grid-column: span 8;
    }

    .im-col-lg-12 {
        grid-column: span 12;
    }
}

/* --- Extra Large (≥1200px) --- */
@media (min-width: 1200px) {
    .im-d-xl-none {
        display: none;
    }

    .im-d-xl-block {
        display: block;
    }

    .im-d-xl-flex {
        display: flex;
    }

    .im-d-xl-grid {
        display: grid;
    }

    .im-col-xl-3 {
        grid-column: span 3;
    }

    .im-col-xl-4 {
        grid-column: span 4;
    }

    .im-col-xl-6 {
        grid-column: span 6;
    }
}

/* --- XXL (≥1400px) --- */
@media (min-width: 1400px) {
    .im-d-xxl-none {
        display: none;
    }

    .im-d-xxl-block {
        display: block;
    }

    .im-d-xxl-flex {
        display: flex;
    }
}


/* ============================================================
   28. RESPONSIVE FOOTER GRID
   ============================================================ */
@media (max-width: 991px) {
    .im-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575px) {
    .im-footer__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   29. RESPONSIVE HEADER
   ============================================================ */
@media (max-width: 991px) {
    .im-nav {
        gap: var(--im-space-0);
    }

    .im-nav__item {
        font-size: var(--im-text-sm);
        padding: var(--im-space-2) var(--im-space-2);
    }
}

@media (max-width: 767px) {
    .im-header__row {
        flex-wrap: wrap;
    }
}


/* ============================================================
   30. HERO BANNER
   ============================================================ */
.im-hero-banner {
    position: relative;
    width: 100%;
    min-height: 480px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.im-hero-banner--tall {
    min-height: 600px;
}

.im-hero-banner--short {
    min-height: 360px;
}

.im-hero-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .2) 100%);
    z-index: 1;
}

.im-hero-banner__content {
    position: relative;
    z-index: 2;
    max-width: 640px;
    color: var(--im-white);
}

.im-hero-banner__title {
    font-size: var(--im-text-4xl);
    font-weight: var(--im-fw-bold);
    line-height: 1.15;
    margin-bottom: var(--im-space-4);
}

.im-hero-banner__subtitle {
    font-size: var(--im-text-lg);
    line-height: 1.6;
    margin-bottom: var(--im-space-6);
    opacity: 0.9;
}

@media (max-width: 767px) {
    .im-hero-banner {
        min-height: 360px;
    }

    .im-hero-banner__title {
        font-size: var(--im-text-2xl);
    }
}


/* ============================================================
   31. SLIDER / CAROUSEL
   ============================================================ */
.im-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.im-slider__track {
    display: flex;
    transition: transform 0.5s ease;
    will-change: transform;
}

.im-slider__slide {
    flex: 0 0 100%;
    min-width: 0;
}

.im-slider__controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 var(--im-space-4);
    pointer-events: none;
    z-index: 5;
}

.im-slider__btn {
    width: 44px;
    height: 44px;
    border-radius: var(--im-radius-full);
    background: rgba(255, 255, 255, .85);
    color: var(--im-black);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    pointer-events: auto;
    transition: background-color var(--im-transition-fast),
        box-shadow var(--im-transition-fast);
    box-shadow: var(--im-shadow);
}

.im-slider__btn:hover {
    background: var(--im-white);
    box-shadow: var(--im-shadow-md);
}

.im-slider__dots {
    display: flex;
    justify-content: center;
    gap: var(--im-space-2);
    padding: var(--im-space-4) 0;
}

.im-slider__dot {
    width: 10px;
    height: 10px;
    border-radius: var(--im-radius-full);
    background: var(--im-gray-300);
    border: none;
    cursor: pointer;
    transition: background-color var(--im-transition-fast),
        transform var(--im-transition-fast);
}

.im-slider__dot--active,
.im-slider__dot:hover {
    background: var(--im-primary);
    transform: scale(1.2);
}

/* Multi-item slider */
.im-slider--multi .im-slider__track {
    gap: var(--im-space-6);
}

.im-slider--multi .im-slider__slide {
    flex: 0 0 calc(33.333% - var(--im-space-4));
}

@media (max-width: 991px) {
    .im-slider--multi .im-slider__slide {
        flex: 0 0 calc(50% - var(--im-space-3));
    }
}

@media (max-width: 575px) {
    .im-slider--multi .im-slider__slide {
        flex: 0 0 100%;
    }
}


/* ============================================================
   32. BLOG COMPONENTS
   ============================================================ */
.im-blog-card {
    background: var(--im-white);
    border-radius: var(--im-radius-lg);
    overflow: hidden;
    box-shadow: var(--im-shadow-sm);
    transition: box-shadow var(--im-transition),
        transform var(--im-transition);
}

.im-blog-card:hover {
    box-shadow: var(--im-shadow-md);
    transform: translateY(-3px);
}

.im-blog-card__img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.im-blog-card__body {
    padding: var(--im-space-5);
}

.im-blog-card__category {
    display: inline-block;
    font-size: var(--im-text-xs);
    font-weight: var(--im-fw-bold);
    text-transform: uppercase;
    color: var(--im-primary);
    letter-spacing: 0.05em;
    margin-bottom: var(--im-space-2);
}

.im-blog-card__title {
    font-size: var(--im-text-lg);
    font-weight: var(--im-fw-bold);
    line-height: 1.3;
    margin-bottom: var(--im-space-2);
    color: var(--im-gray-900);
}

.im-blog-card__title a {
    color: inherit;
}

.im-blog-card__title a:hover {
    color: var(--im-primary);
    opacity: 1;
}

.im-blog-card__excerpt {
    font-size: var(--im-text-sm);
    color: var(--im-gray-600);
    line-height: 1.6;
    margin-bottom: var(--im-space-3);
}

.im-blog-card__meta {
    display: flex;
    align-items: center;
    gap: var(--im-space-3);
    font-size: var(--im-text-xs);
    color: var(--im-gray-400);
}

/* Featured blog card (larger) */
.im-blog-card--featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.im-blog-card--featured .im-blog-card__img {
    height: 100%;
    min-height: 300px;
}

.im-blog-card--featured .im-blog-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--im-space-8);
}

.im-blog-card--featured .im-blog-card__title {
    font-size: var(--im-text-2xl);
}

@media (max-width: 767px) {
    .im-blog-card--featured {
        grid-template-columns: 1fr;
    }

    .im-blog-card--featured .im-blog-card__img {
        height: 220px;
    }
}

/* Blog grid */
.im-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--im-space-6);
}

@media (max-width: 991px) {
    .im-blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .im-blog-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   33. PRODUCT GRID (E-COMMERCE / CATALOG)
   ============================================================ */
.im-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--im-space-6);
}

@media (max-width: 991px) {
    .im-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .im-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 400px) {
    .im-product-grid {
        grid-template-columns: 1fr;
    }
}

.im-product-card {
    background: var(--im-white);
    border-radius: var(--im-radius-lg);
    overflow: hidden;
    box-shadow: var(--im-shadow-sm);
    transition: box-shadow var(--im-transition),
        transform var(--im-transition);
}

.im-product-card:hover {
    box-shadow: var(--im-shadow-md);
    transform: translateY(-3px);
}

.im-product-card__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--im-gray-100);
}

.im-product-card__body {
    padding: var(--im-space-4);
}

.im-product-card__title {
    font-size: var(--im-text-sm);
    font-weight: var(--im-fw-bold);
    margin-bottom: var(--im-space-1);
    color: var(--im-gray-800);
    line-height: 1.3;
}

.im-product-card__price {
    font-size: var(--im-text-lg);
    font-weight: var(--im-fw-bold);
    color: var(--im-primary);
}

.im-product-card__old-price {
    font-size: var(--im-text-sm);
    color: var(--im-gray-400);
    text-decoration: line-through;
    margin-left: var(--im-space-2);
}

.im-product-card__badge {
    position: absolute;
    top: var(--im-space-3);
    left: var(--im-space-3);
    padding: var(--im-space-1) var(--im-space-3);
    background: var(--im-primary);
    color: var(--im-white);
    font-size: var(--im-text-xs);
    font-weight: var(--im-fw-bold);
    border-radius: var(--im-radius-sm);
}

/* Sidebar filter (for grid pages) */
.im-filter-sidebar {
    background: var(--im-white);
    border-radius: var(--im-radius-lg);
    padding: var(--im-space-6);
    box-shadow: var(--im-shadow-sm);
}

.im-filter-sidebar__title {
    font-size: var(--im-text-lg);
    font-weight: var(--im-fw-bold);
    margin-bottom: var(--im-space-4);
    padding-bottom: var(--im-space-3);
    border-bottom: 2px solid var(--im-gray-200);
}

.im-filter-group {
    margin-bottom: var(--im-space-5);
}

.im-filter-group__label {
    font-size: var(--im-text-sm);
    font-weight: var(--im-fw-bold);
    margin-bottom: var(--im-space-2);
    color: var(--im-gray-700);
}

.im-filter-group__item {
    display: flex;
    align-items: center;
    gap: var(--im-space-2);
    padding: var(--im-space-1) 0;
    font-size: var(--im-text-sm);
    color: var(--im-gray-600);
    cursor: pointer;
}


/* ============================================================
   34. SECTION SPACING
   ============================================================ */
.im-section {
    padding: var(--im-space-16) 0;
}

.im-section--sm {
    padding: var(--im-space-10) 0;
}

.im-section--lg {
    padding: var(--im-space-24) 0;
}

.im-section__title {
    font-size: var(--im-text-2xl);
    font-weight: var(--im-fw-bold);
    margin-bottom: var(--im-space-2);
}

.im-section__subtitle {
    font-size: var(--im-text-base);
    color: var(--im-gray-500);
    margin-bottom: var(--im-space-8);
}

/* Section title with "see all" link */
.im-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--im-space-8);
}

.im-section__more {
    font-size: var(--im-text-sm);
    font-weight: var(--im-fw-bold);
    color: var(--im-primary);
}

.im-section__more:hover {
    opacity: 1;
    text-decoration: underline;
}


/* ============================================================
   35. BREADCRUMB
   ============================================================ */
.im-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--im-space-2);
    font-size: var(--im-text-sm);
    color: var(--im-gray-500);
    padding: var(--im-space-4) 0;
}

.im-breadcrumb__sep {
    color: var(--im-gray-300);
}

.im-breadcrumb a {
    color: var(--im-primary);
}

.im-breadcrumb a:hover {
    text-decoration: underline;
    opacity: 1;
}


/* ============================================================
   36. PAGINATION
   ============================================================ */
.im-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--im-space-1);
    padding: var(--im-space-8) 0;
}

.im-pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--im-space-3);
    font-size: var(--im-text-sm);
    font-weight: var(--im-fw-bold);
    border-radius: var(--im-radius);
    color: var(--im-gray-600);
    transition: all var(--im-transition-fast);
}

.im-pagination__item:hover {
    background: var(--im-gray-100);
    color: var(--im-primary);
    opacity: 1;
}

.im-pagination__item--active {
    background: var(--im-primary);
    color: var(--im-white);
}

.im-pagination__item--active:hover {
    background: var(--im-primary-dark);
    color: var(--im-white);
}


/* ============================================================
   38. BADGE
   ============================================================ */
.im-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.15em 0.6em; font-size: var(--im-text-xs); font-weight: var(--im-fw-bold);
  line-height: 1; border-radius: var(--im-radius-pill); white-space: nowrap;
}
.im-badge--primary { background: var(--im-primary); color: var(--im-white); }
.im-badge--success { background: var(--im-success); color: var(--im-white); }
.im-badge--info    { background: var(--im-info); color: var(--im-white); }
.im-badge--warning { background: var(--im-warning); color: var(--im-black); }
.im-badge--danger  { background: var(--im-danger); color: var(--im-white); }
.im-badge--gray    { background: var(--oc-gray-2); color: var(--oc-gray-7); }
.im-badge--outline { background: transparent; border: 1px solid currentColor; }
.im-badge--lg { font-size: var(--im-text-sm); padding: 0.25em 0.75em; }
.im-badge--dot { width: 8px; height: 8px; padding: 0; border-radius: var(--im-radius-full); }


/* ============================================================
   39. AVATAR
   ============================================================ */
.im-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--im-radius-full);
  overflow: hidden; background: var(--oc-gray-3); color: var(--oc-gray-7);
  font-weight: var(--im-fw-bold); font-size: var(--im-text-sm); flex-shrink: 0;
}
.im-avatar img { width: 100%; height: 100%; object-fit: cover; }
.im-avatar--sm { width: 28px; height: 28px; font-size: var(--im-text-xs); }
.im-avatar--md { width: 40px; height: 40px; }
.im-avatar--lg { width: 56px; height: 56px; font-size: var(--im-text-lg); }
.im-avatar--xl { width: 80px; height: 80px; font-size: var(--im-text-2xl); }
.im-avatar--square { border-radius: var(--im-radius); }
.im-avatar-group { display: flex; }
.im-avatar-group .im-avatar { margin-left: -8px; border: 2px solid var(--im-white); }
.im-avatar-group .im-avatar:first-child { margin-left: 0; }
.im-avatar__status {
  position: relative;
}
.im-avatar__status::after {
  content: ''; position: absolute; bottom: 1px; right: 1px; width: 10px; height: 10px;
  border-radius: var(--im-radius-full); border: 2px solid var(--im-white); background: var(--im-success);
}


/* ============================================================
   40. TAG / CHIP
   ============================================================ */
.im-tag {
  display: inline-flex; align-items: center; gap: var(--im-space-1);
  padding: var(--im-space-1) var(--im-space-3); font-size: var(--im-text-sm);
  border-radius: var(--im-radius-pill); background: var(--oc-gray-1); color: var(--oc-gray-7);
  border: 1px solid var(--oc-gray-3); line-height: 1.4;
}
.im-tag--primary { background: var(--oc-green-0); color: var(--im-primary-dark); border-color: var(--oc-green-2); }
.im-tag--info    { background: var(--oc-blue-0); color: var(--oc-blue-8); border-color: var(--oc-blue-2); }
.im-tag--danger  { background: var(--oc-red-0); color: var(--oc-red-8); border-color: var(--oc-red-2); }
.im-tag__close {
  display: inline-flex; cursor: pointer; opacity: .6; margin-left: var(--im-space-1);
  font-size: 1.1em; line-height: 1;
}
.im-tag__close:hover { opacity: 1; }


/* ============================================================
   41. DIVIDER
   ============================================================ */
.im-divider {
  border: none; border-top: 1px solid var(--oc-gray-3); margin: var(--im-space-6) 0;
}
.im-divider--sm  { margin: var(--im-space-3) 0; }
.im-divider--lg  { margin: var(--im-space-10) 0; }
.im-divider--vertical {
  display: inline-block; width: 1px; height: 1em; border-top: none;
  border-left: 1px solid var(--oc-gray-3); margin: 0 var(--im-space-3); vertical-align: middle;
}
.im-divider--text {
  display: flex; align-items: center; gap: var(--im-space-4); border: none; margin: var(--im-space-6) 0;
  font-size: var(--im-text-sm); color: var(--oc-gray-5);
}
.im-divider--text::before, .im-divider--text::after {
  content: ''; flex: 1; height: 1px; background: var(--oc-gray-3);
}


/* ============================================================
   42. SPINNER
   ============================================================ */
@keyframes im-spin { to { transform: rotate(360deg); } }
.im-spinner {
  display: inline-block; width: 24px; height: 24px;
  border: 3px solid var(--oc-gray-3); border-top-color: var(--im-primary);
  border-radius: var(--im-radius-full); animation: im-spin .6s linear infinite;
}
.im-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.im-spinner--lg { width: 40px; height: 40px; border-width: 4px; }
.im-spinner--white { border-color: rgba(255,255,255,.3); border-top-color: var(--im-white); }


/* ============================================================
   43. SKELETON
   ============================================================ */
@keyframes im-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.im-skeleton {
  background: linear-gradient(90deg, var(--oc-gray-2) 25%, var(--oc-gray-1) 50%, var(--oc-gray-2) 75%);
  background-size: 200% 100%; animation: im-shimmer 1.5s ease infinite;
  border-radius: var(--im-radius-sm);
}
.im-skeleton--text { height: 1em; width: 100%; margin-bottom: var(--im-space-2); }
.im-skeleton--title { height: 1.5em; width: 60%; margin-bottom: var(--im-space-3); }
.im-skeleton--circle { width: 48px; height: 48px; border-radius: var(--im-radius-full); }
.im-skeleton--rect { height: 200px; width: 100%; border-radius: var(--im-radius); }
.im-skeleton--btn { height: 38px; width: 120px; border-radius: var(--im-radius-sm); }


/* ============================================================
   44. PROGRESS
   ============================================================ */
.im-progress {
  width: 100%; height: 8px; background: var(--oc-gray-2);
  border-radius: var(--im-radius-pill); overflow: hidden;
}
.im-progress__bar {
  height: 100%; background: var(--im-primary); border-radius: var(--im-radius-pill);
  transition: width var(--im-transition);
}
.im-progress--sm { height: 4px; }
.im-progress--lg { height: 14px; }
.im-progress--success .im-progress__bar { background: var(--im-success); }
.im-progress--info    .im-progress__bar { background: var(--im-info); }
.im-progress--warning .im-progress__bar { background: var(--im-warning); }
.im-progress--danger  .im-progress__bar { background: var(--im-danger); }
.im-progress--striped .im-progress__bar {
  background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}


/* ============================================================
   45. RATING
   ============================================================ */
.im-rating { display: inline-flex; gap: 2px; font-size: var(--im-text-lg); color: var(--oc-yellow-5); }
.im-rating--sm { font-size: var(--im-text-sm); }
.im-rating--lg { font-size: var(--im-text-2xl); }
.im-rating__star { cursor: pointer; transition: transform var(--im-transition-fast); }
.im-rating__star:hover { transform: scale(1.15); }
.im-rating__star--empty { color: var(--oc-gray-3); }


/* ============================================================
   46. FORM — INPUT
   ============================================================ */
.im-input {
  display: block; width: 100%; padding: var(--im-space-2) var(--im-space-3);
  font-family: var(--im-font-family); font-size: var(--im-text-base);
  color: var(--im-black); background: var(--im-white);
  border: 1px solid var(--oc-gray-4); border-radius: var(--im-radius-sm);
  transition: border-color var(--im-transition-fast), box-shadow var(--im-transition-fast);
  outline: none;
}
.im-input:focus {
  border-color: var(--im-primary); box-shadow: 0 0 0 3px rgba(55,178,77,.15);
}
.im-input::placeholder { color: var(--oc-gray-5); }
.im-input--sm { padding: var(--im-space-1) var(--im-space-2); font-size: var(--im-text-sm); }
.im-input--lg { padding: var(--im-space-3) var(--im-space-4); font-size: var(--im-text-lg); }
.im-input--error { border-color: var(--im-danger); }
.im-input--error:focus { box-shadow: 0 0 0 3px rgba(250,82,82,.15); }
.im-input--success { border-color: var(--im-success); }
.im-input:disabled, .im-input[readonly] { background: var(--oc-gray-1); cursor: not-allowed; opacity: .7; }

.im-textarea { min-height: 100px; resize: vertical; }

.im-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23495057'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;
}


/* ============================================================
   47. FORM — CHECKBOX & RADIO
   ============================================================ */
.im-checkbox, .im-radio {
  display: inline-flex; align-items: center; gap: var(--im-space-2);
  cursor: pointer; font-size: var(--im-text-sm); color: var(--oc-gray-7); user-select: none;
}
.im-checkbox input, .im-radio input { display: none; }
.im-checkbox__box, .im-radio__box {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 2px solid var(--oc-gray-4); background: var(--im-white);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--im-transition-fast);
}
.im-checkbox__box { border-radius: var(--im-radius-sm); }
.im-radio__box { border-radius: var(--im-radius-full); }
.im-checkbox input:checked ~ .im-checkbox__box,
.im-radio input:checked ~ .im-radio__box {
  background: var(--im-primary); border-color: var(--im-primary);
}
.im-checkbox input:checked ~ .im-checkbox__box::after {
  content: ''; width: 5px; height: 9px;
  border: solid var(--im-white); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.im-radio input:checked ~ .im-radio__box::after {
  content: ''; width: 8px; height: 8px; border-radius: var(--im-radius-full); background: var(--im-white);
}


/* ============================================================
   48. FORM — SWITCH / TOGGLE
   ============================================================ */
.im-switch {
  display: inline-flex; align-items: center; gap: var(--im-space-2); cursor: pointer; user-select: none;
}
.im-switch input { display: none; }
.im-switch__track {
  width: 44px; height: 24px; background: var(--oc-gray-4); border-radius: var(--im-radius-pill);
  position: relative; transition: background var(--im-transition-fast);
}
.im-switch__track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  background: var(--im-white); border-radius: var(--im-radius-full);
  transition: transform var(--im-transition-fast); box-shadow: var(--im-shadow-sm);
}
.im-switch input:checked ~ .im-switch__track { background: var(--im-primary); }
.im-switch input:checked ~ .im-switch__track::after { transform: translateX(20px); }
.im-switch__label { font-size: var(--im-text-sm); color: var(--oc-gray-7); }


/* ============================================================
   49. FORM — RANGE
   ============================================================ */
.im-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--oc-gray-3);
  border-radius: var(--im-radius-pill); outline: none;
}
.im-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px;
  background: var(--im-primary); border-radius: var(--im-radius-full);
  cursor: pointer; box-shadow: var(--im-shadow);
}


/* ============================================================
   50. FORM — FILE UPLOAD
   ============================================================ */
.im-file-upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--im-space-8); border: 2px dashed var(--oc-gray-4);
  border-radius: var(--im-radius-lg); background: var(--oc-gray-0);
  cursor: pointer; text-align: center; transition: border-color var(--im-transition-fast);
}
.im-file-upload:hover { border-color: var(--im-primary); }
.im-file-upload input[type="file"] { display: none; }
.im-file-upload__icon { font-size: 2rem; color: var(--oc-gray-5); margin-bottom: var(--im-space-2); }
.im-file-upload__text { font-size: var(--im-text-sm); color: var(--oc-gray-6); }


/* ============================================================
   51. FORM — INPUT GROUP
   ============================================================ */
.im-input-group {
  display: flex; align-items: stretch;
}
.im-input-group .im-input {
  flex: 1; border-radius: 0;
}
.im-input-group .im-input:first-child { border-radius: var(--im-radius-sm) 0 0 var(--im-radius-sm); }
.im-input-group .im-input:last-child  { border-radius: 0 var(--im-radius-sm) var(--im-radius-sm) 0; }
.im-input-group__addon {
  display: flex; align-items: center; padding: 0 var(--im-space-3);
  background: var(--oc-gray-1); border: 1px solid var(--oc-gray-4);
  font-size: var(--im-text-sm); color: var(--oc-gray-6); white-space: nowrap;
}
.im-input-group__addon:first-child { border-right: none; border-radius: var(--im-radius-sm) 0 0 var(--im-radius-sm); }
.im-input-group__addon:last-child  { border-left: none; border-radius: 0 var(--im-radius-sm) var(--im-radius-sm) 0; }
.im-input-group .im-btn { border-radius: 0; }
.im-input-group .im-btn:last-child { border-radius: 0 var(--im-radius-sm) var(--im-radius-sm) 0; }


/* ============================================================
   52. FORM — LAYOUT
   ============================================================ */
.im-form-group { margin-bottom: var(--im-space-5); }
.im-form-label {
  display: block; font-size: var(--im-text-sm); font-weight: var(--im-fw-bold);
  color: var(--oc-gray-7); margin-bottom: var(--im-space-1);
}
.im-form-help { font-size: var(--im-text-xs); color: var(--oc-gray-5); margin-top: var(--im-space-1); }
.im-form-error { font-size: var(--im-text-xs); color: var(--im-danger); margin-top: var(--im-space-1); }
.im-form-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--im-space-4);
}


/* ============================================================
   53. ALERT / BANNER
   ============================================================ */
.im-alert {
  display: flex; align-items: flex-start; gap: var(--im-space-3);
  padding: var(--im-space-4); border-radius: var(--im-radius); border-left: 4px solid;
  font-size: var(--im-text-sm); line-height: 1.5;
}
.im-alert--info    { background: var(--im-info-light); border-color: var(--im-info); color: var(--oc-blue-9); }
.im-alert--success { background: var(--im-success-light); border-color: var(--im-success); color: var(--oc-teal-9); }
.im-alert--warning { background: var(--im-warning-light); border-color: var(--im-warning); color: var(--oc-yellow-9); }
.im-alert--danger  { background: var(--im-danger-light); border-color: var(--im-danger); color: var(--oc-red-9); }
.im-alert__icon { flex-shrink: 0; width: 20px; height: 20px; }
.im-alert__content { flex: 1; }
.im-alert__title { font-weight: var(--im-fw-bold); margin-bottom: var(--im-space-1); }
.im-alert__close {
  flex-shrink: 0; cursor: pointer; opacity: .5; font-size: 1.2em; background: none; border: none; color: inherit;
}
.im-alert__close:hover { opacity: 1; }


/* ============================================================
   54. TOAST / NOTIFICATION
   ============================================================ */
.im-toast-container {
  position: fixed; z-index: 9999; display: flex; flex-direction: column; gap: var(--im-space-3);
  pointer-events: none; padding: var(--im-space-4);
}
.im-toast-container--top-right  { top: 0; right: 0; }
.im-toast-container--top-left   { top: 0; left: 0; }
.im-toast-container--bottom-right { bottom: 0; right: 0; }
.im-toast {
  pointer-events: auto; display: flex; align-items: center; gap: var(--im-space-3);
  padding: var(--im-space-3) var(--im-space-4); min-width: 300px; max-width: 420px;
  background: var(--im-white); border-radius: var(--im-radius); box-shadow: var(--im-shadow-lg);
  border-left: 4px solid var(--oc-gray-4); font-size: var(--im-text-sm);
  animation: im-toast-in .3s ease;
}
@keyframes im-toast-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: none; } }
.im-toast--success { border-color: var(--im-success); }
.im-toast--error   { border-color: var(--im-danger); }
.im-toast--warning { border-color: var(--im-warning); }
.im-toast--info    { border-color: var(--im-info); }
.im-toast__close { margin-left: auto; cursor: pointer; opacity: .5; background: none; border: none; }
.im-toast__close:hover { opacity: 1; }


/* ============================================================
   55. MODAL / DIALOG
   ============================================================ */
.im-modal {
  display: none; position: fixed; inset: 0; z-index: var(--im-z-modal);
  align-items: center; justify-content: center;
}
.im-modal.is-active { display: flex; }
.im-modal__backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.5);
  animation: im-fade-in .2s ease;
}
@keyframes im-fade-in { from { opacity: 0; } to { opacity: 1; } }
.im-modal__dialog {
  position: relative; z-index: 1; width: 100%; max-width: 520px; max-height: 90vh;
  background: var(--im-white); border-radius: var(--im-radius-lg); box-shadow: var(--im-shadow-xl);
  display: flex; flex-direction: column; animation: im-modal-in .25s ease;
}
@keyframes im-modal-in { from { opacity: 0; transform: scale(.95) translateY(16px); } to { opacity: 1; transform: none; } }
.im-modal--sm .im-modal__dialog { max-width: 380px; }
.im-modal--lg .im-modal__dialog { max-width: 720px; }
.im-modal--full .im-modal__dialog { max-width: 95vw; max-height: 95vh; }
.im-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--im-space-5) var(--im-space-6); border-bottom: 1px solid var(--oc-gray-2);
}
.im-modal__title { font-size: var(--im-text-lg); font-weight: var(--im-fw-bold); }
.im-modal__close { background: none; border: none; font-size: 1.5rem; cursor: pointer; opacity: .5; color: var(--oc-gray-7); }
.im-modal__close:hover { opacity: 1; }
.im-modal__body { padding: var(--im-space-6); overflow-y: auto; flex: 1; }
.im-modal__footer {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--im-space-3);
  padding: var(--im-space-4) var(--im-space-6); border-top: 1px solid var(--oc-gray-2);
}


/* ============================================================
   56. DROPDOWN
   ============================================================ */
.im-dropdown { position: relative; display: inline-block; }
.im-dropdown__menu {
  display: none; position: absolute; top: 100%; left: 0; z-index: var(--im-z-dropdown);
  min-width: 200px; padding: var(--im-space-2) 0; margin-top: var(--im-space-1);
  background: var(--im-white); border-radius: var(--im-radius); box-shadow: var(--im-shadow-lg);
  border: 1px solid var(--oc-gray-2);
}
.im-dropdown.is-active .im-dropdown__menu { display: block; animation: im-fade-in .15s ease; }
.im-dropdown--right .im-dropdown__menu { left: auto; right: 0; }
.im-dropdown__item {
  display: block; width: 100%; padding: var(--im-space-2) var(--im-space-4);
  font-size: var(--im-text-sm); color: var(--oc-gray-7); text-align: left;
  background: none; border: none; cursor: pointer; transition: background var(--im-transition-fast);
}
.im-dropdown__item:hover { background: var(--oc-gray-1); color: var(--im-primary); opacity: 1; }
.im-dropdown__item--active { color: var(--im-primary); font-weight: var(--im-fw-bold); }
.im-dropdown__divider { height: 1px; margin: var(--im-space-2) 0; background: var(--oc-gray-2); }
.im-dropdown__header {
  padding: var(--im-space-2) var(--im-space-4); font-size: var(--im-text-xs);
  font-weight: var(--im-fw-bold); color: var(--oc-gray-5); text-transform: uppercase;
}


/* ============================================================
   57. TOOLTIP
   ============================================================ */
.im-tooltip { position: relative; display: inline-block; }
.im-tooltip__content {
  display: none; position: absolute; z-index: var(--im-z-overlay);
  padding: var(--im-space-1) var(--im-space-3); font-size: var(--im-text-xs);
  color: var(--im-white); background: var(--oc-gray-8); border-radius: var(--im-radius-sm);
  white-space: nowrap; pointer-events: none;
}
.im-tooltip:hover .im-tooltip__content { display: block; animation: im-fade-in .1s ease; }
.im-tooltip--top .im-tooltip__content    { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.im-tooltip--bottom .im-tooltip__content { top: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.im-tooltip--left .im-tooltip__content   { right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.im-tooltip--right .im-tooltip__content  { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }


/* ============================================================
   58. POPOVER
   ============================================================ */
.im-popover { position: relative; display: inline-block; }
.im-popover__content {
  display: none; position: absolute; z-index: var(--im-z-overlay);
  width: 280px; padding: var(--im-space-4); background: var(--im-white);
  border-radius: var(--im-radius); box-shadow: var(--im-shadow-lg);
  border: 1px solid var(--oc-gray-2);
}
.im-popover.is-active .im-popover__content { display: block; animation: im-fade-in .15s ease; }
.im-popover__header { font-weight: var(--im-fw-bold); margin-bottom: var(--im-space-2); }
.im-popover__body { font-size: var(--im-text-sm); color: var(--oc-gray-6); line-height: 1.5; }


/* ============================================================
   59. TABS
   ============================================================ */
.im-tabs { display: block; }
.im-tabs__nav {
  display: flex; border-bottom: 2px solid var(--oc-gray-2); gap: 0;
}
.im-tabs__item {
  padding: var(--im-space-3) var(--im-space-5); font-size: var(--im-text-sm);
  font-weight: var(--im-fw-bold); color: var(--oc-gray-5); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  background: none; border-top: none; border-left: none; border-right: none;
  transition: all var(--im-transition-fast);
}
.im-tabs__item:hover { color: var(--im-primary); opacity: 1; }
.im-tabs__item.is-active {
  color: var(--im-primary); border-bottom-color: var(--im-primary);
}
.im-tabs__panel { display: none; padding: var(--im-space-5) 0; }
.im-tabs__panel.is-active { display: block; }

/* Pill tabs */
.im-tabs--pill .im-tabs__nav { border-bottom: none; gap: var(--im-space-2); background: var(--oc-gray-1); padding: var(--im-space-1); border-radius: var(--im-radius); }
.im-tabs--pill .im-tabs__item { border-bottom: none; border-radius: var(--im-radius-sm); padding: var(--im-space-2) var(--im-space-4); }
.im-tabs--pill .im-tabs__item.is-active { background: var(--im-white); color: var(--im-primary); box-shadow: var(--im-shadow-sm); }

/* Vertical tabs */
.im-tabs--vertical { display: flex; gap: var(--im-space-6); }
.im-tabs--vertical .im-tabs__nav { flex-direction: column; border-bottom: none; border-right: 2px solid var(--oc-gray-2); }
.im-tabs--vertical .im-tabs__item { text-align: left; border-bottom: none; border-right: 2px solid transparent; margin-bottom: 0; margin-right: -2px; }
.im-tabs--vertical .im-tabs__item.is-active { border-right-color: var(--im-primary); }
.im-tabs--vertical .im-tabs__panel { flex: 1; padding: 0; }


/* ============================================================
   60. ACCORDION
   ============================================================ */
.im-accordion { border: 1px solid var(--oc-gray-2); border-radius: var(--im-radius); overflow: hidden; }
.im-accordion__item { border-bottom: 1px solid var(--oc-gray-2); }
.im-accordion__item:last-child { border-bottom: none; }
.im-accordion__header {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: var(--im-space-4) var(--im-space-5); font-size: var(--im-text-base);
  font-weight: var(--im-fw-bold); color: var(--oc-gray-8); background: none; border: none;
  cursor: pointer; text-align: left; transition: background var(--im-transition-fast);
}
.im-accordion__header:hover { background: var(--oc-gray-0); }
.im-accordion__icon {
  transition: transform var(--im-transition-fast); font-size: 0.8em;
}
.im-accordion__item.is-active .im-accordion__icon { transform: rotate(180deg); }
.im-accordion__body {
  display: none; padding: 0 var(--im-space-5) var(--im-space-4);
  font-size: var(--im-text-sm); color: var(--oc-gray-6); line-height: 1.6;
}
.im-accordion__item.is-active .im-accordion__body { display: block; }

/* Flush variant */
.im-accordion--flush { border: none; border-radius: 0; }
.im-accordion--flush .im-accordion__item { border-bottom: 1px solid var(--oc-gray-2); }


/* ============================================================
   61. TABLE
   ============================================================ */
.im-table-wrapper { overflow-x: auto; border-radius: var(--im-radius); border: 1px solid var(--oc-gray-2); }
.im-table {
  width: 100%; border-collapse: collapse; font-size: var(--im-text-sm);
}
.im-table th {
  text-align: left; padding: var(--im-space-3) var(--im-space-4);
  font-weight: var(--im-fw-bold); color: var(--oc-gray-7);
  background: var(--oc-gray-0); border-bottom: 2px solid var(--oc-gray-2);
}
.im-table td {
  padding: var(--im-space-3) var(--im-space-4); border-bottom: 1px solid var(--oc-gray-1);
  color: var(--oc-gray-7);
}
.im-table--striped tbody tr:nth-child(even) { background: var(--oc-gray-0); }
.im-table--hover tbody tr { transition: background var(--im-transition-fast); }
.im-table--hover tbody tr:hover { background: var(--oc-green-0); }
.im-table--bordered td, .im-table--bordered th { border: 1px solid var(--oc-gray-2); }


/* ============================================================
   62. LIST GROUP
   ============================================================ */
.im-list-group {
  border: 1px solid var(--oc-gray-2); border-radius: var(--im-radius); overflow: hidden;
}
.im-list-group__item {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--im-space-3) var(--im-space-4); border-bottom: 1px solid var(--oc-gray-2);
  font-size: var(--im-text-sm); color: var(--oc-gray-7);
  transition: background var(--im-transition-fast);
}
.im-list-group__item:last-child { border-bottom: none; }
a.im-list-group__item:hover { background: var(--oc-gray-0); color: var(--im-primary); opacity: 1; }
.im-list-group__item.is-active { background: var(--im-primary); color: var(--im-white); border-color: var(--im-primary); }


/* ============================================================
   63. SIDEBAR
   ============================================================ */
.im-sidebar {
  width: 260px; background: var(--im-white); border-right: 1px solid var(--oc-gray-2);
  height: 100vh; position: sticky; top: 0; overflow-y: auto; flex-shrink: 0;
  padding: var(--im-space-4) 0;
}
.im-sidebar__group { margin-bottom: var(--im-space-4); }
.im-sidebar__title {
  padding: var(--im-space-2) var(--im-space-5); font-size: var(--im-text-xs);
  font-weight: var(--im-fw-bold); color: var(--oc-gray-5); text-transform: uppercase;
  letter-spacing: 0.05em;
}
.im-sidebar__item {
  display: flex; align-items: center; gap: var(--im-space-3);
  padding: var(--im-space-2) var(--im-space-5); font-size: var(--im-text-sm);
  color: var(--oc-gray-7); transition: all var(--im-transition-fast);
}
.im-sidebar__item:hover { background: var(--oc-gray-0); color: var(--im-primary); opacity: 1; }
.im-sidebar__item.is-active { color: var(--im-primary); font-weight: var(--im-fw-bold); background: var(--oc-green-0); border-right: 3px solid var(--im-primary); }


/* ============================================================
   64. STEPPER / WIZARD
   ============================================================ */
.im-stepper { display: flex; align-items: center; gap: 0; }
.im-stepper__step {
  display: flex; align-items: center; gap: var(--im-space-2); font-size: var(--im-text-sm);
}
.im-stepper__number {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--im-radius-full); font-weight: var(--im-fw-bold); font-size: var(--im-text-sm);
  background: var(--oc-gray-2); color: var(--oc-gray-6); flex-shrink: 0;
}
.im-stepper__label { color: var(--oc-gray-5); white-space: nowrap; }
.im-stepper__line { flex: 1; height: 2px; background: var(--oc-gray-3); margin: 0 var(--im-space-3); min-width: 32px; }
.im-stepper__step.is-active .im-stepper__number { background: var(--im-primary); color: var(--im-white); }
.im-stepper__step.is-active .im-stepper__label { color: var(--im-primary); font-weight: var(--im-fw-bold); }
.im-stepper__step.is-done .im-stepper__number { background: var(--im-success); color: var(--im-white); }
.im-stepper__step.is-done ~ .im-stepper__line { background: var(--im-success); }


/* ============================================================
   65. TIMELINE
   ============================================================ */
.im-timeline { position: relative; padding-left: var(--im-space-8); }
.im-timeline::before {
  content: ''; position: absolute; left: 11px; top: 0; bottom: 0;
  width: 2px; background: var(--oc-gray-3);
}
.im-timeline__item { position: relative; padding-bottom: var(--im-space-8); }
.im-timeline__item:last-child { padding-bottom: 0; }
.im-timeline__dot {
  position: absolute; left: calc(-1 * var(--im-space-8) + 4px); top: 4px;
  width: 16px; height: 16px; border-radius: var(--im-radius-full);
  background: var(--im-primary); border: 3px solid var(--im-white); box-shadow: var(--im-shadow-sm);
}
.im-timeline__time { font-size: var(--im-text-xs); color: var(--oc-gray-5); margin-bottom: var(--im-space-1); }
.im-timeline__title { font-size: var(--im-text-base); font-weight: var(--im-fw-bold); margin-bottom: var(--im-space-1); }
.im-timeline__desc { font-size: var(--im-text-sm); color: var(--oc-gray-6); line-height: 1.5; }


/* ============================================================
   66. PRICING TABLE
   ============================================================ */
.im-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--im-space-6); align-items: start; }
@media (max-width: 767px) { .im-pricing { grid-template-columns: 1fr; } }
.im-pricing__card {
  background: var(--im-white); border-radius: var(--im-radius-lg); padding: var(--im-space-8);
  border: 1px solid var(--oc-gray-2); text-align: center;
  transition: box-shadow var(--im-transition), transform var(--im-transition);
}
.im-pricing__card:hover { box-shadow: var(--im-shadow-lg); transform: translateY(-4px); }
.im-pricing__card--featured {
  border-color: var(--im-primary); position: relative;
  box-shadow: var(--im-shadow-md);
}
.im-pricing__badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: var(--im-space-1) var(--im-space-4); background: var(--im-primary);
  color: var(--im-white); font-size: var(--im-text-xs); font-weight: var(--im-fw-bold);
  border-radius: var(--im-radius-pill);
}
.im-pricing__name { font-size: var(--im-text-lg); font-weight: var(--im-fw-bold); margin-bottom: var(--im-space-2); }
.im-pricing__price { font-size: var(--im-text-4xl); font-weight: var(--im-fw-bold); color: var(--im-primary); }
.im-pricing__period { font-size: var(--im-text-sm); color: var(--oc-gray-5); }
.im-pricing__features { list-style: none; padding: var(--im-space-6) 0; text-align: left; }
.im-pricing__features li {
  padding: var(--im-space-2) 0; font-size: var(--im-text-sm); color: var(--oc-gray-7);
  border-bottom: 1px solid var(--oc-gray-1);
}
.im-pricing__features li::before { content: '✓ '; color: var(--im-success); font-weight: var(--im-fw-bold); }


/* ============================================================
   67. TESTIMONIAL
   ============================================================ */
.im-testimonial {
  background: var(--im-white); border-radius: var(--im-radius-lg);
  padding: var(--im-space-8); box-shadow: var(--im-shadow-sm);
}
.im-testimonial__text {
  font-size: var(--im-text-lg); line-height: 1.6; color: var(--oc-gray-7);
  margin-bottom: var(--im-space-5); font-style: italic; position: relative;
  padding-left: var(--im-space-6);
}
.im-testimonial__text::before {
  content: '"'; position: absolute; left: 0; top: -8px;
  font-size: 3rem; color: var(--im-primary); font-style: normal; line-height: 1;
}
.im-testimonial__author {
  display: flex; align-items: center; gap: var(--im-space-3);
}
.im-testimonial__name { font-weight: var(--im-fw-bold); font-size: var(--im-text-sm); }
.im-testimonial__role { font-size: var(--im-text-xs); color: var(--oc-gray-5); }


/* ============================================================
   68. STATS / COUNTER
   ============================================================ */
.im-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--im-space-6); text-align: center; }
@media (max-width: 767px) { .im-stats { grid-template-columns: repeat(2, 1fr); } }
.im-stats__item { padding: var(--im-space-4); }
.im-stats__number {
  font-size: var(--im-text-4xl); font-weight: var(--im-fw-bold); color: var(--im-primary);
  line-height: 1.1; margin-bottom: var(--im-space-1);
}
.im-stats__label { font-size: var(--im-text-sm); color: var(--oc-gray-6); }


/* ============================================================
   69. FAQ SECTION
   ============================================================ */
.im-faq { max-width: 720px; margin: 0 auto; }


/* ============================================================
   70. NEWSLETTER SECTION
   ============================================================ */
.im-newsletter {
  max-width: 520px; margin: 0 auto; text-align: center;
}
.im-newsletter__form {
  display: flex; gap: var(--im-space-2); margin-top: var(--im-space-4);
}
.im-newsletter__form .im-input { flex: 1; }


/* ============================================================
   71. PARTNERS / LOGO GRID
   ============================================================ */
.im-partners {
  display: flex; align-items: center; justify-content: center;
  gap: var(--im-space-10); flex-wrap: wrap; opacity: .5;
}
.im-partners img { height: 40px; filter: grayscale(1); transition: all var(--im-transition); }
.im-partners img:hover { filter: none; opacity: 1; }


/* ============================================================
   72. LIGHTBOX / GALLERY
   ============================================================ */
.im-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--im-space-4);
}
.im-gallery__item {
  overflow: hidden; border-radius: var(--im-radius); cursor: pointer;
  aspect-ratio: 1; position: relative;
}
.im-gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--im-transition);
}
.im-gallery__item:hover img { transform: scale(1.05); }
.im-lightbox {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.9); align-items: center; justify-content: center;
}
.im-lightbox.is-active { display: flex; }
.im-lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: var(--im-radius); }
.im-lightbox__close {
  position: absolute; top: var(--im-space-4); right: var(--im-space-4);
  color: var(--im-white); font-size: 2rem; cursor: pointer; background: none; border: none;
}


/* ============================================================
   73. COLOR UTILITY CLASSES (Semantic)
   ============================================================ */
.im-bg-success { background-color: var(--im-success) !important; }
.im-bg-success-light { background-color: var(--im-success-light) !important; }
.im-bg-info { background-color: var(--im-info) !important; }
.im-bg-info-light { background-color: var(--im-info-light) !important; }
.im-bg-warning { background-color: var(--im-warning) !important; }
.im-bg-warning-light { background-color: var(--im-warning-light) !important; }
.im-bg-danger { background-color: var(--im-danger) !important; }
.im-bg-danger-light { background-color: var(--im-danger-light) !important; }

.im-text-success { color: var(--im-success) !important; }
.im-text-info { color: var(--im-info) !important; }
.im-text-warning { color: var(--im-warning) !important; }
.im-text-danger { color: var(--im-danger) !important; }

.im-border-success { border-color: var(--im-success) !important; }
.im-border-info { border-color: var(--im-info) !important; }
.im-border-warning { border-color: var(--im-warning) !important; }
.im-border-danger { border-color: var(--im-danger) !important; }

/* Button semantic variants */
.im-btn--success { background: var(--im-success); color: var(--im-white); }
.im-btn--info    { background: var(--im-info); color: var(--im-white); }
.im-btn--warning { background: var(--im-warning); color: var(--im-black); }
.im-btn--danger  { background: var(--im-danger); color: var(--im-white); }
.im-btn--secondary { background: var(--oc-gray-6); color: var(--im-white); }
.im-btn--ghost { background: transparent; color: var(--im-primary); }
.im-btn--ghost:hover { background: var(--oc-green-0); }
.im-btn--link { background: none; color: var(--im-primary); padding: 0; text-decoration: underline; }
.im-btn--outline-primary { background: transparent; color: var(--im-primary); border: 1px solid var(--im-primary); }
.im-btn--outline-primary:hover { background: var(--im-primary); color: var(--im-white); }


/* ============================================================
   99. PRINT STYLES
   ============================================================ */
@media print {

    .im-header,
    .im-footer,
    .im-d-print-none {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }
}