/* ============================================
   DressAPI Official Website - Custom Styles
   Blue gradient underwater theme
   ============================================ */

:root
{
    --da-deep: #062a45;
    --da-dark: #0a3d68;
    --da-mid: #0056B3;
    --da-light: #2994d1;
    --da-pale: #5bb8e8;
    --da-surface: #e8f4fb;
    --da-white: #f8fbfe;
    --da-accent: #0056B3;
    --da-code-bg: #0d1b2a;
}

/* ---- Global ---- */
html
{
    scroll-behavior: smooth;
}

body
{
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #2c3e50;
    background: var(--da-white);
}

h1, h2, h3, h4, h5, h6
{
    font-weight: 700;
    color: var(--da-deep);
}

a
{
    color: var(--da-mid);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover
{
    color: var(--da-dark);
}

/* ---- Top Slim Header ---- */
.b5-header-slim
{
    background: var(--da-deep);
    padding: 0.25rem 0;
    font-size: 1em;
}

.b5-header-slim .navbar-brand
{
    font-size: 1em;
    opacity: 0.9;
}

.b5-header-slim .nav-link
{
    color: rgba(255,255,255,0.8) !important;
    font-size: 1em;
}

.b5-header-slim .nav-link:hover,
.b5-header-slim .nav-link.active
{
    color: #fff !important;
}

.b5-access-btn
{
    font-size: 1em !important;
    padding: 0.2rem 0.75rem !important;
    border-color: rgba(255,255,255,0.4) !important;
    color: #fff !important;
}

.b5-access-btn:hover
{
    background: rgba(255,255,255,0.15) !important;
}

.b5-user-name
{
    color: rgba(255,255,255,0.8);
    font-size: 1em;
}

/* ---- Center Header ---- */
.b5-header-center
{
    background: linear-gradient(135deg, var(--da-dark) 0%, var(--da-mid) 100%);
    padding: 1rem 0;
}

.b5-brand-wrapper a
{
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
    gap: 0.75rem;
}

.b5-brand-icon
{
    flex-shrink: 0;
}

.b5-brand-icon img
{
    height: 48px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) brightness(0) invert(1);
}

.b5-brand-title
{
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

.b5-brand-tagline
{
    font-size: 1em;
    opacity: 0.85;
    color: rgba(255,255,255,0.9);
}

.b5-brand-text
{
    line-height: 1.3;
}

.b5-right-zone
{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.b5-socials span
{
    color: rgba(255,255,255,0.8);
    font-size: 1em;
    margin-right: 0.5rem;
}

.b5-socials ul
{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.75rem;
}

.b5-socials a
{
    color: rgba(255,255,255,0.8);
    font-size: 1.1rem;
}

.b5-socials a:hover
{
    color: #fff;
}

.b5-social-label
{
    font-size: 1em;
    vertical-align: middle;
}

.b5-search-wrapper
{
    display: flex;
    max-width: 280px;
}

.b5-search-wrapper .form-control
{
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-size: 1em;
    border-radius: 0.375rem 0 0 0.375rem;
}

.b5-search-wrapper .form-control::placeholder
{
    color: rgba(255,255,255,0.6);
}

.b5-search-wrapper .btn
{
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.8);
    border-radius: 0 0.375rem 0.375rem 0;
}

.b5-search-wrapper .btn:hover
{
    background: rgba(255,255,255,0.15);
    color: #fff;
}

/* ---- Main Navigation ---- */
.b5-header-navbar
{
    background: var(--da-mid);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.b5-header-navbar .navbar
{
    padding: 0;
}

.b5-header-navbar .nav-link
{
    color: rgba(255,255,255,0.9) !important;
    padding: 0.75rem 1rem !important;
    font-weight: 500;
    font-size: 1em;
    transition: background 0.2s;
}

.b5-header-navbar .nav-link:hover,
.b5-header-navbar .nav-link.active
{
    color: #fff !important;
    background: rgba(255,255,255,0.12);
}

.b5-header-navbar .navbar-toggler
{
    border-color: rgba(255,255,255,0.3);
    padding: 0.5rem;
}

.b5-header-navbar .navbar-toggler-icon
{
    filter: invert(1);
}

.b5-header-navbar .dropdown-menu
{
    border: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    border-radius: 0.5rem;
    padding: 0.5rem 0;
}

.b5-header-navbar .dropdown-item
{
    padding: 0.5rem 1.25rem;
    font-size: 1em;
}

.b5-header-navbar .dropdown-item:hover,
.b5-header-navbar .dropdown-item.active
{
    background: var(--da-surface);
    color: var(--da-dark);
}

.megamenu-dropdown
{
    min-width: 600px;
}

/* ---- Hero section (homepage) ---- */
.da-hero
{
    background: #fff;
    color: var(--da-deep);
    padding: 4rem 0 3rem;
    text-align: center;
}

.da-hero .logo-img
{
    width: 120px;
    height: auto;
    margin-bottom: 1.5rem;
}

.da-hero h1
{
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--da-deep);
    margin-bottom: 0.25rem;
    letter-spacing: -0.03em;
}

.da-hero .lead
{
    font-size: 1.15rem;
    color: #555;
    max-width: 600px;
    margin: 1rem auto 1.5rem;
    line-height: 1.6;
}

.da-hero .badge-license
{
    display: inline-block;
    margin-top: 1rem;
    font-size: 1em;
    color: #888;
    letter-spacing: 0.05em;
}

.da-hero .btn-light
{
    background: var(--da-mid);
    color: #fff;
    font-weight: 600;
    padding: 0.6rem 1.75rem;
    border-radius: 0.5rem;
    border: none;
}

.da-hero .btn-light:hover
{
    background: var(--da-dark);
}

.da-hero .btn-outline-light
{
    border: 2px solid var(--da-mid);
    color: var(--da-mid);
    font-weight: 600;
    padding: 0.6rem 1.75rem;
    border-radius: 0.5rem;
}

.da-hero .btn-outline-light:hover
{
    background: var(--da-mid);
    color: #fff;
}

/* ---- Content Sections ---- */
.da-section
{
    padding: 3.5rem 0;
}

.da-section-alt
{
    background: var(--da-surface);
}

.da-section-dark
{
    background: var(--da-code-bg);
    color: #e0e6ed;
}

.da-section-dark h2,
.da-section-dark h3,
.da-section-dark h4
{
    color: #fff;
}

.da-section-blue
{
    background: #fff;
    color: var(--da-deep);
}

.da-section-blue h2,
.da-section-blue h3,
.da-section-blue h4
{
    color: var(--da-deep);
}

.da-section h2
{
    font-size: 1.75rem;
    margin-bottom: 2rem;
    text-align: center;
}

.da-section h2::after
{
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: var(--da-light);
    margin: 0.75rem auto 0;
    border-radius: 2px;
}

.da-section-dark h2::after,
.da-section-blue h2::after
{
    background: var(--da-mid);
}

/* ---- Feature Cards ---- */
.da-feature-card
{
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem;
    height: 100%;
    transition: transform 0.2s, box-shadow 0.2s;
}

.da-feature-card:hover
{
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.da-feature-card .feature-icon
{
    font-size: 2rem;
    color: var(--da-mid);
    margin-bottom: 0.75rem;
}

.da-feature-card h4
{
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.da-feature-card p
{
    font-size: 1em;
    color: #64748b;
    margin: 0;
}

/* ---- Code Block ---- */
.da-code-block
{
    background: var(--da-code-bg);
    border-radius: 0.75rem;
    padding: 1.5rem;
    overflow-x: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1em;
    line-height: 1.7;
    color: #a8c7e2;
    border: 1px solid rgba(255,255,255,0.08);
    white-space: pre-wrap;
}

.da-code-block .kw { color: #7ec8e3; }
.da-code-block .str { color: #a3d9a5; }
.da-code-block .cm { color: #5e7d8a; }
.da-code-block .fn { color: #dbb668; }
.da-code-block .op { color: #e07070; }
.da-code-block .type { color: #c9a0dc; }

/* ---- Steps ---- */
.da-step
{
    text-align: center;
    padding: 1.5rem;
}

.da-step-number
{
    display: inline-flex;
    width: 48px;
    height: 48px;
    background: var(--da-mid);
    color: #fff;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.da-step h4
{
    font-size: 1.1rem;
}

.da-step p
{
    font-size: 1em;
    color: #64748b;
}

/* ---- Install Box ---- */
.da-install-box
{
    background: var(--da-code-bg);
    color: #a3d9a5;
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
    font-family: 'Fira Code', 'Cascadia Code', monospace;
    font-size: 1rem;
    text-align: center;
    max-width: 500px;
    margin: 0 auto 1.5rem;
    border: 1px solid rgba(255,255,255,0.08);
}

.da-install-box .prompt
{
    color: #5e7d8a;
    user-select: none;
}

/* ---- Donation Section ---- */
.da-donate
{
    text-align: center;
    padding: 3rem 0;
}

.da-donate p
{
    max-width: 540px;
    margin: 0 auto 1.5rem;
    font-size: 1rem;
}

.da-donate .btn-donate
{
    background: #22c55e;
    color: #fff;
    font-weight: 600;
    padding: 0.7rem 2rem;
    border-radius: 0.5rem;
    border: none;
    font-size: 1rem;
    transition: all 0.2s;
}

.da-donate .btn-donate:hover
{
    background: #16a34a;
    transform: translateY(-2px);
}

/* ---- Consulting Form ---- */
.da-contact-form
{
    background: #fff;
    border-radius: 0.75rem;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    max-width: 640px;
    margin: 0 auto;
}

.da-contact-form .form-label
{
    font-weight: 600;
    font-size: 1em;
    color: var(--da-deep);
}

.da-contact-form .form-control
{
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
}

.da-contact-form .form-control:focus
{
    border-color: var(--da-light);
    box-shadow: 0 0 0 3px rgba(41,148,209,0.15);
}

.da-contact-form .btn-primary
{
    background: var(--da-mid);
    border: none;
    padding: 0.6rem 2rem;
    font-weight: 600;
    border-radius: 0.5rem;
}

.da-contact-form .btn-primary:hover
{
    background: var(--da-dark);
}

/* ---- Consulting Page ---- */

.da-consulting-intro
{
    background: var(--da-surface);
    color: #222;
    padding: 3rem 0;
    text-align: center;
}

.da-page-content .da-consulting-intro h2
{
    font-size: 2rem;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    margin-bottom: 1rem;
    color: #222;
    text-align: center;
}

.da-consulting-intro .lead
{
    font-size: 1.15rem;
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    max-width: 700px;
    margin: 0 auto 1.5rem;
    color: #333;
}

.da-stat-row
{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
}

.da-stat-item
{
    text-align: center;
    min-width: 140px;
}

.da-stat-item .da-stat-number
{
    font-size: 2.2rem;
    font-weight: 800;
    display: block;
    line-height: 1.2;
}

.da-stat-item .da-stat-label
{
    font-size: 1em;
    opacity: 0.85;
    margin-top: 0.25rem;
    display: block;
}

/* Service tiers - single box */
.da-services-box
{
    background: #f5f0e0;
    border-radius: 0.75rem;
    padding: 2.5rem 2rem;
}

.da-services-box h4
{
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #222;
}

.da-services-box ul
{
    list-style: none;
    padding: 0;
    margin-bottom: 0;
}

.da-services-box ul li
{
    padding: 0.3rem 0;
    font-size: 1em;
    position: relative;
    padding-left: 1.4rem;
    color: #333;
}

.da-services-box ul li::before
{
    content: "\f26a";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    color: var(--da-mid);
    font-size: 1em;
}

.da-services-box .da-services-summary
{
    font-size: 1.05rem;
    color: #333;
    line-height: 1.6;
}

/* Advantage items */
.da-advantage-item
{
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.da-advantage-icon
{
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--da-surface);
    color: var(--da-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.da-advantage-item h5
{
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--da-dark);
}

.da-advantage-item p
{
    font-size: 1em;
    color: #555;
    margin: 0;
}

/* CTA Banner (homepage) */
.da-cta-banner
{
    background: linear-gradient(135deg, var(--da-dark) 0%, var(--da-mid) 100%);
    color: #fff;
    padding: 3rem 0;
    text-align: center;
}

.da-cta-banner h2
{
    font-size: 1.8rem;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

.da-cta-banner p
{
    font-size: 1.1rem;
    opacity: 0.92;
    max-width: 650px;
    margin: 0 auto 1.5rem;
}

.da-cta-banner .btn-light
{
    font-weight: 600;
    padding: 0.6rem 2rem;
    border-radius: 0.5rem;
    font-size: 1.1rem;
}

.da-cta-banner .da-cta-sub
{
    font-size: 1em;
    opacity: 0.75;
    margin-top: 1rem;
}

/* ---- Footer ---- */
.b5-footer
{
    background: var(--da-deep);
    color: rgba(255,255,255,0.8);
}

.b5-footer-main
{
    padding: 2.5rem 0 1rem;
}

.b5-footer-brand a
{
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
    gap: 0.75rem;
}

.b5-footer-brand h2
{
    font-size: 1.25rem;
    color: #fff;
    margin: 0;
}

.b5-footer-brand h3
{
    font-size: 1em;
    color: rgba(255,255,255,0.7);
    margin: 0;
    font-weight: 400;
}

.b5-footer h4
{
    font-size: 1em;
    color: #fff;
    margin-bottom: 0.75rem;
}

.b5-footer h4 a
{
    color: #fff;
    text-decoration: none;
}

.b5-footer ul
{
    font-size: 1em;
}

.b5-footer a
{
    color: rgba(255,255,255,0.7);
}

.b5-footer a:hover
{
    color: #fff;
}

.b5-footer li
{
    margin-bottom: 0.25rem;
}

.b5-socials-footer ul
{
    padding: 0;
}

.b5-socials-footer a
{
    font-size: 1.5rem;
    margin-right: 0.5rem;
}

.b5-footer-small-prints
{
    background: rgba(0,0,0,0.2);
    padding: 1rem 0;
    font-size: 1em;
}

.b5-footer-small-prints a
{
    color: rgba(255,255,255,0.6);
    margin-right: 1.5rem;
}

.b5-footer-small-prints a:hover
{
    color: #fff;
}

.b5-footer-small-prints p
{
    color: rgba(255,255,255,0.5);
}

/* ---- Language Selector ---- */
.da-lang-selector .btn
{
    color: rgba(255,255,255,0.7);
    font-size: 1em;
    padding: 0.15rem 0.4rem;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 0.25rem;
    min-width: 32px;
    text-align: center;
}

.da-lang-selector .btn:hover,
.da-lang-selector .btn.active
{
    background: rgba(255,255,255,0.15);
    color: #fff;
}

/* ---- Page Content ---- */
.da-page-content
{
    padding: 2rem 0;
}

.da-page-content h1
{
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.da-page-content > header .lead
{
    font-style: italic;
    margin-bottom: 0;
}

.da-page-content .page-content > .da-section:first-child
{
    padding-top: 1.5rem;
}

.da-page-content h2
{
    font-size: 1.5rem;
    margin: 2rem 0 1rem;
    text-align: left;
}

.da-page-content h2::after
{
    display: none;
}

/* ---- Snippet blocks ---- */
.da-snippet
{
    background: var(--da-code-bg);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    font-size: 1em;
    color: #a8c7e2;
    font-family: 'Fira Code', 'Cascadia Code', monospace;
    border: 1px solid rgba(255,255,255,0.06);
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.da-snippet > code
{
    display: block;
    margin-top: 0.5rem;
    color: #e0e8f0;
}

.da-snippet-label
{
    display: table;
    background: var(--da-mid);
    color: #fff;
    font-size: 1em;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.da-snippet-title
{
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--da-dark);
    margin-bottom: 0.5rem;
}

.da-section-alt .da-snippet-title
{
    color: var(--da-dark);
}

/* ---- Responsive ---- */
@media (max-width: 991.98px)
{
    .da-hero h1
    {
        font-size: 1.75rem;
    }

    .da-hero .lead
    {
        font-size: 1rem;
    }

    .b5-header-center .b5-right-zone
    {
        display: none;
    }

    .megamenu-dropdown
    {
        min-width: auto;
    }
}

@media (max-width: 575.98px)
{
    .da-hero
    {
        padding: 2.5rem 0 2rem;
    }

    .da-hero .logo-img
    {
        width: 80px;
    }

    .da-section
    {
        padding: 2rem 0;
    }
}