/* =========================================================
   THE IT WORK — FULL PORTAL WHITE THEME
   Background: #ffffff (full white)
   Text: #333232
   Header / Primary: #fddd5e
   Buttons: #fddd5e background + #333232 text
   Font: Poppins
========================================================= */

/* ----------------------
   GLOBAL FONT
----------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

html, body, * {
    font-family: 'Poppins', sans-serif !important;
    color: #333232 !important;
}

/* ----------------------
   GLOBAL PURE WHITE BACKGROUND
----------------------- */

html, body,
.zc-portal-body,
.zc-portal-wrapper,
.portal-body,
.portal-container,
#portalbody,
.module,
.card,
.zc-card,
.section,
.form-container,
.zc-module,
div,
section,
article {
    background-color: #ffffff !important;
}

/* Layout Containers */
.Layout__container,
.Layout__oneColumn,
.Layout__column1,
.HomeContainer__minHeight,
.HomeContainer__minHeight > div,
#acbt_layout,
#acbt_layout > div,
#acbt_layout div {
    background-color: #ffffff !important;
}

/* Empty divs (Zoho uses these as white spacers) */
.Layout__column1 div:empty,
div:empty {
    background-color: #ffffff !important;
}

/* Remove any shadows that make blocks appear off-white */
.Layout__container,
.Layout__oneColumn,
.card,
.module,
.zc-card {
    box-shadow: none !important;
    border: none !important;
}

/* ----------------------
   HEADER + NAV + TABS
----------------------- */
header, .header,
.navbar, .portal-header,
.zc-header, .zc-nav,
.tabs, .zc-tabs,
.portal-tab, .tab-header,
.nav {
    background-color: #fddd5e !important;
    color: #333232 !important;
    border: none !important;
}

header a, .header a, .nav a, .zc-nav a,
.tabs a, .tab-header a {
    color: #333232 !important;
}

.tabs .active,
.zc-tabs .active,
.tab-header .active {
    background-color: #fddd5e !important;
    color: #333232 !important;
    border-bottom: 2px solid #333232 !important;
}

/* ----------------------
   INPUTS / FORMS
----------------------- */
input, textarea, select,
.portal-input, .form-input, .zc-input {
    background-color: #ffffff !important;
    color: #333232 !important;
    border: 1px solid #333232 !important;
}

input:focus, textarea:focus, select:focus {
    border-color: #fddd5e !important;
    box-shadow: 0 0 4px #fddd5e !important;
}

/* ----------------------
   BUTTONS — GLOBAL
----------------------- */
button,
.btn,
.btn *,
.btn.blue,
.btn.primary,
.zc-btn,
.portal-submit,
input[type=submit],
#nextbtn,
.action-button,
.button,
.portal-btn {
    background-color: #fddd5e !important;
    color: #333232 !important;
    border: none !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
}

button span, .btn span {
    color: #333232 !important;
}

button:hover,
.btn:hover,
.zc-btn:hover,
input[type=submit]:hover {
    background-color: #e6cc4d !important;
    color: #333232 !important;
}

/* Zoho's forced blue button */
.btn.blue,
.btn.blue *,
button.btn.blue {
    background-color: #fddd5e !important;
    color: #333232 !important;
}

/* ----------------------
   STATUS BUTTON OVERRIDE (No Purple)
----------------------- */
.status,
.status *,
.ticket-status,
.ticket-status *,
.label-status,
.label-status *,
.status-btn,
.status-btn *,
.tag.status,
.zStatus,
.zStatus *,
.zBtnStatus,
.zBtnStatus *,
[class*="purple"],
.purple,
.purple *,
.bg-purple,
.bg-purple * {
    background-color: #fddd5e !important;
    color: #333232 !important;
    border: none !important;
}

/* ----------------------
   FOOTER + REMOVE POWERED BY ZOHO
----------------------- */
footer, .portal-footer, .zc-footer {
    background-color: #ffffff !important;
    color: #333232 !important;
}

footer .powered-by,
.zc-footer-powered,
.portal-poweredby {
    display: none !important;
}

/* =========================================================
   PRIORITY BUTTONS (None / High / Medium / Low)
   - Pure white background
   - No borders
   - All same size
   - Clean toggle look
========================================================= */

.Radiogroupalternate__radiobuttongroup {
    gap: 10px !important;
}

/* Remove wrapper borders */
.Radiogroupalternate__radiobutton {
    border: none !important;
    box-shadow: none !important;
}

/* Hide native input */
.Radiogroupalternate__radiobutton > input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Base style */
.Radiogroupalternate__radiobutton .Radiogroupalternate__radiolabel,
.Radiogroupalternate__radiobutton .Radiogroupalternate__radiofaux {
    background: #ffffff !important;
    color: #333232 !important;
    border: none !important;
    border-radius: 12px !important;
    width: 120px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Hover */
.Radiogroupalternate__radiobutton:hover .Radiogroupalternate__radiofaux {
    background: #fddd5e !important;
    color: #333232 !important;
}

/* Selected */
.Radiogroupalternate__radiolabel[aria-checked="true"] .Radiogroupalternate__radiofaux,
.Radiogroupalternate__radiobutton > input[type="radio"]:checked + label .Radiogroupalternate__radiofaux {
    background: #333232 !important;
    color: #fddd5e !important;
}

/* Text inherits */
.Radiogroupalternate__radiofaux,
.Radiogroupalternate__radiolabel span {
    color: inherit !important;
}

/* ----------------------
   ROOT VARIABLES
----------------------- */
:root {
    --primary-bg: #fddd5e !important;
    --primary-color: #333232 !important;
    --secondary-bg: #ffffff !important;
    --secondary-color: #333232 !important;
}