/*
    JuiceCrafters Help Desk Theme v3
    Upload to: /hdesk/theme/hesk3/customer/css/themes/juicecrafters.css
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

/* ── Core CSS Variables ── */
:root {
    --primary:              #2d6047;
    --secondary:            #3a8c5c;
    --tertiary:             #5bb87a;

    --main-background:      #f2f8f4;
    --surface:              #ffffff;
    --foreground:           #1a2e22;

    --font__pri-clr:        #1a2e22;
    --font__sec-clr:        #1a2e22;

    --input-bg:             #ffffff;
    --input-clr:            #1a2e22;

    --link__pri-clr:        #2d6047;
    --link__pri-hover-clr:  #1a3a2a;
    --link__sec-hover-clr:  #3a8c5c;

    --btn__clr-pri:         #ffffff;

    --header_nav__clr:          rgba(255,255,255,0.9);
    --header_nav__hover_clr:    #a8dbb8;
    --header_profile__clr:      #ffffff;

    --shadow-1:             rgba(26,58,42,0.10);
    --shadow-1-hsla:        150, 40%, 20%;
    --shadow_smaller:       0 1px 3px 0;
    --shadow_small:         0 1px 4px 0;
    --shadow_med:           0 2px 8px 0;
    --shadow_blur-only:     0 0 6px 0;
    --shadow_dropdown_label: inset 1px 1px 1px;
    --shadow_dropdown_label_invert: inset -1px -1px 1px;

    --table_row__bg:        color-mix(in srgb, var(--primary) 6%, var(--surface));
    --table_row__bg-even:   color-mix(in srgb, var(--tertiary) 4%, var(--surface));
    --table_row__bg-hover:  color-mix(in srgb, var(--primary) 10%, var(--surface));

    --navlink__clr:             #1a2e22;
    --navlink__hover-bg:        #e8f5ee;
    --navlink__title-clr:       #2d6047;

    --breadcrumbs__a-clr:       #2d6047;
    --breadcrumbs__a-hover-clr: #3a8c5c;

    --preview__title-clr:               #2d6047;
    --preview__hover-bg:                #f0faf4;
    --article_preview__hover-clr:       #1a2e22;
    --article_preview_suggestion_clr:   #1a2e22;

    --search__clr:          #1a2e22;
    --search__bg:           #ffffff;
    --search__icon-fill:    #2d6047;

    --dropdown__clr:        #1a2e22;
    --datepicker__clr:      #3a8c5c;
    --notification__clr:    #1a2e22;

    --success:              #2d7a4f;
    --success-2:            #e8f5ee;
    --error:                #c0392b;
    --error-2:              #fdf0f0;
    --warning:              #d4860a;
    --warning-2:            #fff8ee;
    --info:                 #2d6047;
    --info-2:               #e8f5ee;
    --info-3:               #f4faf6;

    --radio__bg:            #ffffff;
    --radio__fill-clr:      #ffffff;
    --radio__hover-bg:      #2d6047;

    --ticket_response__bg:          #ffffff;
    --suggest_preview__clr:         #1a2e22;
    --suggest_preview__hover-bg:    #f0faf4;
}

/* ── Global base ── */
.theme_juicecrafters body {
    font-family: 'DM Sans', sans-serif !important;
    background: #f2f8f4 !important;
    color: #1a2e22 !important;
}

.theme_juicecrafters * {
    font-family: 'DM Sans', sans-serif !important;
}

/* ── Fix white text globally — only header should have white text ── */
.theme_juicecrafters a {
    color: #2d6047 !important;
}
.theme_juicecrafters a:hover {
    color: #1a3a2a !important;
}
.theme_juicecrafters p,
.theme_juicecrafters span,
.theme_juicecrafters td,
.theme_juicecrafters li,
.theme_juicecrafters label,
.theme_juicecrafters div {
    color: inherit !important;
}

/* ── Headings ── */
.theme_juicecrafters h1,
.theme_juicecrafters h2,
.theme_juicecrafters h3,
.theme_juicecrafters h4,
.theme_juicecrafters .h-1,
.theme_juicecrafters .h-2,
.theme_juicecrafters .h-3 {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 600 !important;
    color: #1a3a2a !important;
}

/* ── HEADER — white text only here ── */
.theme_juicecrafters .header {
    background: #1a3a2a !important;
    padding: 0 24px !important;
}

.theme_juicecrafters .header *,
.theme_juicecrafters .header a,
.theme_juicecrafters .header span,
.theme_juicecrafters .header p,
.theme_juicecrafters .header div {
    color: rgba(255,255,255,0.88) !important;
}

.theme_juicecrafters .header a:hover {
    color: #a8dbb8 !important;
}

/* ── Logo in header ── */
.theme_juicecrafters .header .logo a,
.theme_juicecrafters .header .header__logo a,
.theme_juicecrafters .header .site-name a,
.theme_juicecrafters .header__logo {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
}

/* Inject logo text via pseudo if no logo image is set */
.theme_juicecrafters .header .logo::before,
.theme_juicecrafters .header .header__logo::before {
    content: '🥤 Juice Crafters';
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* ── Breadcrumbs — dark text ── */
.theme_juicecrafters .breadcrumbs,
.theme_juicecrafters .breadcrumbs a,
.theme_juicecrafters .breadcrumbs span {
    color: #5a7a65 !important;
    font-size: 13px !important;
}

.theme_juicecrafters .breadcrumbs a:hover {
    color: #2d6047 !important;
}

/* ── Hero / search area ── */
.theme_juicecrafters .cust-help {
    text-align: center !important;
    padding: 32px 20px 24px !important;
}

.theme_juicecrafters .cust-help h1,
.theme_juicecrafters .cust-help .h-1 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.9rem !important;
    color: #1a3a2a !important;
    margin-bottom: 18px !important;
    text-align: center !important;
}

/* ── Search bar — pill shaped, centered ── */
.theme_juicecrafters .search {
    max-width: 540px !important;
    margin: 0 auto 22px !important;
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1.5px solid #c8e0d0 !important;
    border-radius: 50px !important;
    padding: 5px 5px 5px 18px !important;
    box-shadow: 0 2px 12px rgba(26,58,42,0.09) !important;
    overflow: hidden !important;
    width: 100% !important;
}

.theme_juicecrafters .search .search__icon,
.theme_juicecrafters .search svg {
    flex-shrink: 0 !important;
    color: #2d6047 !important;
    fill: #2d6047 !important;
    margin-right: 6px !important;
}

.theme_juicecrafters .search input[type="text"],
.theme_juicecrafters .search input[type="search"] {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 6px 4px !important;
    font-size: 14px !important;
    color: #1a2e22 !important;
    outline: none !important;
    border-radius: 0 !important;
}

.theme_juicecrafters .search input[type="text"]::placeholder,
.theme_juicecrafters .search input[type="search"]::placeholder {
    color: #8aaa96 !important;
}

.theme_juicecrafters .search input[type="submit"],
.theme_juicecrafters .search button[type="submit"],
.theme_juicecrafters .search .btn {
    background: #2d6047 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 8px 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.theme_juicecrafters .search input[type="submit"]:hover,
.theme_juicecrafters .search button[type="submit"]:hover {
    background: #1a3a2a !important;
    transform: none !important;
}

/* ── Action boxes ── */
.theme_juicecrafters .action__boxes {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin: 0 auto 24px !important;
    max-width: 620px !important;
}

.theme_juicecrafters .action__box,
.theme_juicecrafters .action__boxes > a {
    background: #ffffff !important;
    border: 1.5px solid #c8e0d0 !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    flex: 1 1 200px !important;
    max-width: 270px !important;
    text-align: left !important;
    text-decoration: none !important;
    color: #1a2e22 !important;
    transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s !important;
    box-shadow: 0 1px 5px rgba(26,58,42,0.07) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.theme_juicecrafters .action__box *,
.theme_juicecrafters .action__boxes > a * {
    color: #1a2e22 !important;
}

.theme_juicecrafters .action__box:hover,
.theme_juicecrafters .action__boxes > a:hover {
    box-shadow: 0 4px 16px rgba(26,58,42,0.12) !important;
    transform: translateY(-2px) !important;
    border-color: #3a8c5c !important;
    text-decoration: none !important;
}

/* ── Knowledgebase section ── */
.theme_juicecrafters .knowledgebase h2,
.theme_juicecrafters .kb-title {
    font-family: 'Cormorant Garamond', serif !important;
    color: #1a3a2a !important;
    text-align: center !important;
}

.theme_juicecrafters .article-list .article,
.theme_juicecrafters .articles-list .article-preview {
    background: #ffffff !important;
    border: 1px solid #d4e8dc !important;
    border-radius: 10px !important;
    margin-bottom: 6px !important;
    transition: box-shadow 0.2s, border-color 0.2s !important;
}

.theme_juicecrafters .article-list .article:hover,
.theme_juicecrafters .articles-list .article-preview:hover {
    box-shadow: 0 3px 12px rgba(26,58,42,0.09) !important;
    border-color: #3a8c5c !important;
}

.theme_juicecrafters .article-list .article a,
.theme_juicecrafters .articles-list .article-preview a {
    color: #2d6047 !important;
}

/* ── Article preview text ── */
.theme_juicecrafters .preview__title,
.theme_juicecrafters .article__heading {
    color: #2d6047 !important;
    font-weight: 500 !important;
}

.theme_juicecrafters .preview__category,
.theme_juicecrafters .article__category {
    color: #5a7a65 !important;
    font-size: 12px !important;
}

.theme_juicecrafters .preview__content,
.theme_juicecrafters .article__excerpt {
    color: #3a4e40 !important;
    font-size: 13px !important;
}

/* ── Buttons ── */
.theme_juicecrafters .btn-full {
    background: #2d6047 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    border: none !important;
}

.theme_juicecrafters .btn-full * { color: #ffffff !important; }

.theme_juicecrafters .btn-full:hover {
    background: #1a3a2a !important;
    transform: translateY(-1px) !important;
}

.theme_juicecrafters .btn-border {
    border: 1.5px solid #2d6047 !important;
    color: #2d6047 !important;
    border-radius: 8px !important;
    background: transparent !important;
}

.theme_juicecrafters .btn-border * { color: #2d6047 !important; }

.theme_juicecrafters .btn-border:hover {
    background: #e8f5ee !important;
}

/* ── Form elements ── */
.theme_juicecrafters input[type="text"]:not(.search input),
.theme_juicecrafters input[type="email"],
.theme_juicecrafters input[type="password"],
.theme_juicecrafters textarea,
.theme_juicecrafters select {
    border-radius: 8px !important;
    border: 1.5px solid #c8e0d0 !important;
    padding: 9px 13px !important;
    font-size: 14px !important;
    color: #1a2e22 !important;
    background: #ffffff !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.theme_juicecrafters input:focus,
.theme_juicecrafters textarea:focus,
.theme_juicecrafters select:focus {
    border-color: #3a8c5c !important;
    box-shadow: 0 0 0 3px rgba(58,140,92,0.12) !important;
    outline: none !important;
}

/* ── Notifications ── */
.theme_juicecrafters .notification.green { background: #e8f5ee !important; }
.theme_juicecrafters .notification.green * { color: #2d7a4f !important; }
.theme_juicecrafters .notification.red { background: #fdf0f0 !important; }
.theme_juicecrafters .notification.red * { color: #c0392b !important; }
.theme_juicecrafters .notification.orange { background: #fff8ee !important; }
.theme_juicecrafters .notification.orange * { color: #d4860a !important; }
.theme_juicecrafters .notification.blue { background: #e8f5ee !important; }
.theme_juicecrafters .notification.blue * { color: #2d6047 !important; }

/* ── Tables ── */
.theme_juicecrafters .table thead th {
    background: #dff0e7 !important;
    color: #1a3a2a !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
}

.theme_juicecrafters .table td,
.theme_juicecrafters .table td * {
    color: #1a2e22 !important;
}

/* ── Tabs ── */
.theme_juicecrafters .tabbed__head .tabbed__head_tabs li {
    color: #1a2e22 !important;
}
.theme_juicecrafters .tabbed__head .tabbed__head_tabs li.current {
    background: #2d6047 !important;
    color: #ffffff !important;
}
.theme_juicecrafters .tabbed__head .tabbed__head_tabs li.current * {
    color: #ffffff !important;
}

/* ── Ticket blocks ── */
.theme_juicecrafters .ticket__body_block .block--head .contact b { color: #2d6047 !important; }
.theme_juicecrafters .ticket__body_block.response { border-left: 3px solid #2d7a4f !important; }
.theme_juicecrafters .ticket__body_block.response .block--head .contact b { color: #2d7a4f !important; }

/* ── Footer ── */
.theme_juicecrafters #cc-link,
.theme_juicecrafters #cc-link *,
.theme_juicecrafters #cc-link a {
    color: #5a7a65 !important;
    font-size: 12px !important;
}

/* ── Submit ticket form centering ── */
.theme_juicecrafters .ticket-form,
.theme_juicecrafters form#ticket,
.theme_juicecrafters .form-container,
.theme_juicecrafters .new-ticket,
.theme_juicecrafters .main__content {
    max-width: 660px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.theme_juicecrafters .page-header,
.theme_juicecrafters .block__head,
.theme_juicecrafters .cust-help .block__head {
    text-align: center !important;
    max-width: 660px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── MOBILE ── */
@media (max-width: 640px) {
    .theme_juicecrafters .cust-help {
        padding: 22px 14px 18px !important;
    }

    .theme_juicecrafters .cust-help h1,
    .theme_juicecrafters .cust-help .h-1 {
        font-size: 1.45rem !important;
    }

    .theme_juicecrafters .search {
        padding: 4px 4px 4px 14px !important;
    }

    .theme_juicecrafters .search input[type="submit"],
    .theme_juicecrafters .search button[type="submit"] {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }

    .theme_juicecrafters .action__boxes {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 0 4px !important;
    }

    .theme_juicecrafters .action__box,
    .theme_juicecrafters .action__boxes > a {
        max-width: 100% !important;
        width: 100% !important;
    }
}