/* ========================= */
/* NAVBAR */
/* ========================= */

.navbar{

    position:sticky;

    top:0;

    z-index:1000;

    background:rgba(255,255,255,.94);

    backdrop-filter:blur(10px);

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

}

.navbar-content{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:72px;

}

.logo{

    font-size:1.45rem;

    font-weight:800;

    letter-spacing:-.5px;

}

.nav-links{

    display:flex;

    gap:34px;

}

.nav-links a{

    position:relative;

    color:var(--color-text-muted);

    font-weight:500;

    transition:.2s;

}

.nav-links a:hover{

    color:var(--color-text);

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--color-accent);

    transition:.2s;

}

.nav-links a:hover::after{

    width:100%;

}

.nav-actions{

    display:flex;

    gap:14px;

}

/* ========================= */
/* BUTTONS */
/* ========================= */

.btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    padding: 12px 20px;

    border-radius: 10px;

    border: none;

    cursor: pointer;

    font-weight: 600;

    transition: .2s;

}

.btn-primary {

    background: var(--color-accent);

    color: white;

}

.btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(37,99,235,.18);

}

.btn-secondary {

    background: white;

    color: var(--color-text);

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

}

.btn-secondary:hover {

    background: #f4f4f4;

}

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

.card {

    background: white;

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

    border-radius: 14px;

    padding: 28px;

    box-shadow: 0 10px 30px rgba(0,0,0,.04);

}

/* ========================= */
/* FORM */
/* ========================= */

.form-group {

    margin-bottom: 20px;

}

label {

    display: block;

    margin-bottom: 8px;

    font-weight: 600;

}

input,
textarea,
select {

    width: 100%;

    padding: 13px 14px;

    border-radius: 10px;

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

    transition: .2s;

}

input:focus,
textarea:focus,
select:focus {

    outline: none;

    border-color: var(--color-accent);

    box-shadow: 0 0 0 4px rgba(37,99,235,.08);

}
/* ========================= */
/* ADMIN CUSTOMER MODE */
/* ========================= */

.admin-customer-mode-banner {
    position: sticky;
    top: 0;
    z-index: 1200;
    width: 100%;
    border-bottom: 1px solid #f5c451;
    background: #fff7d6;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
}

.admin-customer-mode-banner__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: min(100% - 32px, 1320px);
    min-height: 64px;
    margin: 0 auto;
    padding: 10px 0;
}

.admin-customer-mode-banner__message {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    color: #5f4700;
}

.admin-customer-mode-banner__message strong {
    font-size: 14px;
    line-height: 1.35;
}

.admin-customer-mode-banner__message span {
    color: #765c0b;
    font-size: 13px;
    line-height: 1.45;
}

.admin-customer-mode-banner__back {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 15px;
    border-color: #d6a922;
    background: #ffffff;
    color: #5f4700;
    text-decoration: none;
}

.admin-customer-mode-banner__back:hover {
    background: #fffdf5;
}

@media (max-width: 680px) {
    .admin-customer-mode-banner__content {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        padding: 12px 0;
    }

    .admin-customer-mode-banner__back {
        width: 100%;
    }
}


/* ManagedHorizons responsive application pass v2 */

html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*, *::before, *::after {
    box-sizing: border-box;
}

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

textarea,
input,
select,
button {
    max-width: 100%;
    box-sizing: border-box;
}

.modal {
    padding: 12px;
    overflow-y: auto;
}

.modal-card {
    width: min(900px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
}

@media (max-width: 900px) {

    .dashboard-layout,
    .app-layout {
        display: block !important;
    }

    .sidebar {
        width: 100% !important;
        position: relative !important;
    }

    .hero,
    .hero-layout,
    .checkout-layout,
    .support-layout,
    .template-editor-layout {
        grid-template-columns: 1fr !important;
    }

    .stats-grid,
    .dashboard-grid,
    .billing-grid,
    .admin-grid,
    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }
}

@media (max-width: 600px) {

    .site-header,
    .navbar,
    nav {
        flex-wrap: wrap;
        height: auto !important;
    }

    .site-header {
        padding: 16px !important;
    }

    .site-header nav {
        width: 100%;
        gap: 10px;
        flex-wrap: wrap;
    }

    .stats-grid,
    .dashboard-grid,
    .billing-grid,
    .admin-grid,
    .feature-grid,
    .template-editor-layout,
    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .dashboard-content,
    .admin-content,
    .container {
        width: 100%;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .modal-card,
    .card,
    .panel {
        width: 100%;
        max-width: 100%;
    }

    .modal-actions,
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .modal-actions button,
    .hero-actions a,
    .hero-actions button {
        width: 100%;
    }

    textarea {
        min-height: 180px;
    }
}