/* ================================================================
   TYCON GLASS V4.6 — NATIVE COMMERCE CUSTOMER PORTAL

   Scoped by a visual-only route marker set on /account/*.
   Covers profile, password, orders, addresses, quotes, wishlist
   and details/edit states. Keep Zoho's own layout, data and handlers.
   ================================================================ */
html.txc-customer-portal {
  --txc-portal-blue:#004aad;
  --txc-portal-blue-hover:#003b88;
  --txc-portal-ink:#283d52;
  --txc-portal-muted:#596c80;
  --txc-portal-edge:#d4deeb;
  --txc-portal-surface:rgba(255,255,255,.97);
  --txc-portal-radius:18px;
}
html.txc-customer-portal body {
  min-width:0;
  background-color:#f3f6fb;
  background-image:radial-gradient(ellipse at 7% 5%,rgba(0,74,173,.05),transparent 46%),
                   radial-gradient(ellipse at 95% 1%,rgba(255,154,51,.035),transparent 34%);
  color:var(--txc-portal-ink);
  font-family:'Poppins',sans-serif;
  -webkit-font-smoothing:antialiased;
}
html.txc-customer-portal :where(h1,h2,h3) {
  font-family:'Oswald','Poppins',sans-serif;
  color:#183f65;
  letter-spacing:.005em;
  text-transform:none;
}
html.txc-customer-portal :where(h1,.txc-portal-page-title) {
  font-size:clamp(30px,3vw,40px);
  line-height:1.2;
  font-weight:500;
  margin-block:0 22px;
}
html.txc-customer-portal :where(h2) {
  font-weight:500;
  line-height:1.25;
}
html.txc-customer-portal :where(h3) {
  font-weight:500;
  line-height:1.35;
}
/* Styling is deliberately cosmetic; no fixed width is imposed on
   profile, order, address, quote or wishlist data containers. */
html.txc-customer-portal :where(
  [class*="profile-card"],
  [class*="password-card"],
  [class*="address-card"],
  [class*="order-card"],
  [class*="quote-card"],
  [class*="wishlist-card"]
) {
  border:1px solid rgba(212,222,235,.78);
  border-radius:var(--txc-portal-radius);
  background:var(--txc-portal-surface);
  box-shadow:0 10px 28px rgba(26,49,75,.055);
}
html.txc-customer-portal :where([class*="card"],[class*="panel"]):has(> h2,> h3,> form) {
  border-radius:var(--txc-portal-radius);
}
html.txc-customer-portal :where(
  input[type="text"],input[type="email"],input[type="tel"],
  input[type="password"],input[type="number"],input[type="date"],
  input[type="search"],select,textarea
) {
  box-sizing:border-box;
  max-width:100%;
  min-height:46px;
  padding:10px 13px;
  border:1px solid var(--txc-portal-edge);
  border-radius:11px;
  background-color:#fff;
  color:var(--txc-portal-ink);
  font:400 15px/1.4 'Poppins',sans-serif;
  transition:border-color .15s ease,box-shadow .15s ease;
}
html.txc-customer-portal textarea {
  height:auto;
  min-height:100px;
  resize:vertical;
}
html.txc-customer-portal :where(
  input[type="text"],input[type="email"],input[type="tel"],
  input[type="password"],input[type="number"],input[type="date"],
  input[type="search"],select,textarea
):focus {
  border-color:var(--txc-portal-blue);
  box-shadow:0 0 0 3px rgba(0,74,173,.10);
}
html.txc-customer-portal :where(input,select,textarea):focus-visible {
  outline:2px solid var(--txc-portal-blue);
  outline-offset:2px;
}
html.txc-customer-portal :where(input,textarea)::placeholder {
  color:#7a8998;
  opacity:1;
}
html.txc-customer-portal :where(input[type="checkbox"],input[type="radio"]) {
  min-height:0;
  width:auto;
  padding:0;
  accent-color:var(--txc-portal-blue);
}
html.txc-customer-portal :where(label) {
  color:var(--txc-portal-ink);
  font-family:'Poppins',sans-serif;
}
html.txc-customer-portal :where(
  button,input[type="button"],input[type="submit"],input[type="reset"]
) {
  border-radius:11px;
  font-family:'Poppins',sans-serif;
  line-height:1.35;
  transition:background-color .16s ease,color .16s ease,box-shadow .16s ease;
}
html.txc-customer-portal :where(
  button,input[type="button"],input[type="submit"],input[type="reset"],
  a,[role="button"],[role="tab"]
):focus-visible {
  outline:2px solid var(--txc-portal-blue);
  outline-offset:3px;
}
html.txc-customer-portal :where(
  input[type="submit"],button[type="submit"],[class*="primary-btn"],
  [class*="primary-button"]
) {
  min-height:44px;
  padding-inline:19px;
}
html.txc-customer-portal :where(
  [class*="primary-btn"],[class*="primary-button"]
):is(:hover,:focus-visible) {
  box-shadow:0 5px 15px rgba(0,74,173,.16);
}
html.txc-customer-portal :where(a[href*="/account/"]) {
  border-radius:12px;
  text-underline-offset:3px;
}
html.txc-customer-portal :where(
  a[href*="/account/"][aria-current="page"],
  a[href*="/account/"][aria-selected="true"]
) {
  font-weight:600;
}
html.txc-customer-portal :where([role="tab"]) {
  cursor:pointer;
  border-radius:10px 10px 0 0;
}
html.txc-customer-portal :where(
  [role="tab"][aria-selected="true"],
  [role="tab"][aria-current="page"]
) {
  color:var(--txc-portal-blue);
}
html.txc-customer-portal :where([class*="empty-state"],[class*="emptyState"]) {
  max-width:100%;
  text-align:center;
  color:var(--txc-portal-muted);
}
html.txc-customer-portal :where([class*="empty-state"],[class*="emptyState"]) img {
  max-width:min(320px,80vw);
  height:auto;
}
html.txc-customer-portal table {
  max-width:100%;
  border-collapse:collapse;
}
html.txc-customer-portal :where(th,td) {
  overflow-wrap:break-word;
}
html.txc-customer-portal :where(
  .table-responsive,[class*="table-scroll"],[class*="table-wrapper"]
) {
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
html.txc-customer-portal :where(
  [role="dialog"],[aria-modal="true"]
) {
  max-width:calc(100vw - 24px);
  border-radius:18px;
}
@media(max-width:991px) {
  html.txc-customer-portal :where(h1,.txc-portal-page-title) {
    font-size:clamp(28px,5vw,36px);
    margin-block-end:18px;
  }
  html.txc-customer-portal :where(
    [class*="profile-card"],[class*="password-card"],
    [class*="address-card"],[class*="order-card"],
    [class*="quote-card"],[class*="wishlist-card"]
  ) {
    border-radius:16px;
  }
}
@media(max-width:600px) {
  html.txc-customer-portal body {
    max-width:100%;
    overflow-x:clip;
  }
  html.txc-customer-portal :where(h1,.txc-portal-page-title) {
    font-size:30px;
    margin-block-end:16px;
  }
  html.txc-customer-portal :where(h2) {
    font-size:25px;
  }
  html.txc-customer-portal :where(
    input[type="text"],input[type="email"],input[type="tel"],
    input[type="password"],input[type="number"],input[type="date"],
    input[type="search"],select,textarea
  ) {
    max-width:100%;
    min-height:46px;
    font-size:16px; /* iOS focus without automatic page zoom */
  }
  html.txc-customer-portal :where(
    [class*="profile-card"],[class*="password-card"],
    [class*="address-card"],[class*="order-card"],
    [class*="quote-card"],[class*="wishlist-card"]
  ) {
    min-width:0;
    max-width:100%;
    border-radius:14px;
  }
  html.txc-customer-portal :where(
    [role="dialog"],[aria-modal="true"]
  ) {
    width:calc(100vw - 20px);
    max-height:calc(100dvh - 20px);
    overflow:auto;
  }
}
@media (prefers-reduced-motion:reduce) {
  html.txc-customer-portal :where(input,select,textarea,button) {
    transition:none !important;
  }
}

/* ================================================================
   TYCON GLASS V4.7.1 | AUTHENTICATION STYLING
   Bundled in the stable customer-portal stylesheet instead of Zoho's
   generated portal-signin.css; a visual-only bridge styles the sign-in iframe.
   No form handlers, validation, visibility or OTP logic is changed.
   ================================================================ */
body:has(.theme-portal-form-container) {
  background:
    radial-gradient(ellipse at 10% 4%, rgba(0,74,173,.065), transparent 43%),
    radial-gradient(ellipse at 92% 20%, rgba(255,154,51,.055), transparent 39%),
    #f7f9fc;
  color:#263b51;
  min-height:100dvh;
}
body:has(.theme-portal-form-container) .theme-header {
  background:transparent;
}
body:has(.theme-portal-form-container) .theme-branding-info {
  width:auto;
  max-width:100%;
  margin-inline:auto;
  padding:22px 16px 8px;
  justify-content:center;
}
body:has(.theme-portal-form-container) .theme-logo-parent {
  margin:0;
  padding:0;
}
body:has(.theme-portal-form-container) .theme-logo-parent img {
  max-width:min(200px,55vw);
  max-height:58px;
  object-fit:contain;
}
html body .theme-portal-form-container {
  box-sizing:border-box;
  width:min(520px,calc(100% - 32px));
  max-width:100%;
  margin:clamp(15px,3vw,44px) auto 58px;
  padding:clamp(22px,3.3vw,36px);
  border:1px solid rgba(255,255,255,.98);
  border-radius:26px;
  background:linear-gradient(142deg,rgba(255,255,255,.98),rgba(246,250,254,.96));
  box-shadow:0 22px 60px rgba(28,56,83,.11),
             0 4px 14px rgba(28,56,83,.055),
             inset 0 1px 0 #fff;
}
html body .theme-portal-form-container :is(.theme-portal-heading,.verifytitle) {
  font-family:'Oswald','Poppins',sans-serif;
  font-size:clamp(27px,3vw,34px);
  font-weight:500;
  letter-spacing:.01em;
  line-height:1.2;
  text-transform:none;
  color:#173b60;
  margin:0 0 23px;
}
html body .theme-portal-form-container .user-signup-form-container {
  width:100%;
  max-width:100%;
}
html body .theme-portal-form-container .user-signup-form-field-wrapper {
  min-width:0;
  margin-block-end:17px;
}
html body .theme-portal-form-container .user-signup-form-field-wrapper > label,
html body .theme-portal-form-container .user-signup-form-field-wrapper .form-field-and-message > label {
  font-family:'Poppins',sans-serif;
  font-weight:600;
  font-size:13px;
  line-height:1.45;
  color:#3c4e61;
  margin-block-end:7px;
}
html body .theme-portal-form-container .user-signup-form-container :is(
  input[type="text"],input[type="email"],input[type="password"],input[type="tel"],
  input[type="number"],input[type="date"],textarea,select,.textbox
) {
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  min-width:0;
  height:49px;
  padding:12px 14px;
  border:1px solid #c9d6e4;
  border-radius:12px;
  background:#fff;
  color:#263b51;
  font:400 16px/1.4 'Poppins',sans-serif;
  box-shadow:inset 0 1px 2px rgba(23,59,96,.025);
  transition:border-color .16s ease,box-shadow .16s ease;
}
html body .theme-portal-form-container .user-signup-form-container :is(
  input,textarea,select
):focus-visible {
  outline:2px solid #004aad;
  outline-offset:2px;
}
html body .theme-portal-form-container .user-signup-form-container :is(
  input,textarea,select
):focus {
  border-color:#004aad;
  box-shadow:0 0 0 3px rgba(0,74,173,.11);
}
html body .theme-portal-form-container .user-signup-form-container :is(
  input,textarea
)::placeholder {
  color:#788797;
  opacity:1;
}
html body .theme-portal-form-container .user-signup-form-container :is(
  input.errorborder,textarea.errorborder,select.errorborder
) {
  border-color:#c83243;
  box-shadow:0 0 0 2px rgba(200,50,67,.10);
}
html body .theme-portal-form-container .user-signup-form-container .phone-input-wrapper {
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:9px;
  width:100%;
}
html body .theme-portal-form-container .phone-input-wrapper .phone-input-group {
  box-sizing:border-box;
  flex:0 0 93px;
  width:93px;
  min-width:93px;
  min-height:49px;
  display:flex;
  align-items:center;
  padding:0 24px 0 13px;
  border:1px solid #c9d6e4;
  border-radius:12px;
  background:#fff;
  color:#263b51;
}
html body .theme-portal-form-container .phone-input-wrapper .phone-input-group:before {
  top:18px;
  right:13px;
  width:7px;
  height:7px;
  transform:rotate(45deg);
  border-color:#004aad;
}
html body .theme-portal-form-container .phone-input-wrapper .phone-input-group:after {
  display:none;
}
html body .theme-portal-form-container .phone-input-wrapper .phone-input-group:focus-within {
  border-color:#004aad;
  box-shadow:0 0 0 3px rgba(0,74,173,.11);
}
html body .theme-portal-form-container .phone-input-wrapper .theme-signup-country-code-display {
  white-space:nowrap;
  font-size:15px;
  font-weight:600;
}
html body .theme-portal-form-container .phone-input-wrapper .country-code-select {
  position:absolute;
  inset:0;
  z-index:4;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  opacity:0;
  cursor:pointer;
}
html body .theme-portal-form-container .phone-input-wrapper .phone-input {
  flex:1 1 auto;
  min-width:0;
  width:0;
}
html body .theme-portal-form-container .newsletter-container {
  margin-block:5px 17px;
}
html body .theme-portal-form-container .newsletter-container .form-field-and-message {
  display:flex;
  align-items:flex-start;
  gap:10px;
}
html body .theme-portal-form-container .newsletter-container input[type="checkbox"] {
  flex:0 0 18px;
  width:18px;
  height:18px;
  margin:3px 0 0;
  accent-color:#004aad;
}
html body .theme-portal-form-container .newsletter-container .newsletter-message {
  margin:0;
  line-height:1.5;
  font-size:13px;
  color:#526478;
}
html body .theme-portal-form-container :is(
  .user-signup-form-container .signup-button,
  .user-signup-form-container .btn.blue,
  .user-signup-back-button
) {
  min-height:46px;
  width:auto;
  padding:11px 25px;
  border-radius:12px;
  background:#004aad;
  color:#fff;
  font:600 15px/1.3 'Poppins',sans-serif;
  letter-spacing:.01em;
  text-transform:none;
  box-shadow:0 6px 14px rgba(0,74,173,.17);
  transition:background-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
html body .theme-portal-form-container :is(
  .user-signup-form-container .signup-button,
  .user-signup-form-container .btn.blue,
  .user-signup-back-button
):is(:hover,:focus-visible) {
  background:#003b88;
  color:#fff;
  box-shadow:0 8px 18px rgba(0,74,173,.22);
}
html body .theme-portal-form-container :is(
  .user-signup-form-container .signup-button,
  .user-signup-form-container .btn.blue
):focus-visible {
  outline:2px solid #004aad;
  outline-offset:3px;
}
html body .theme-portal-form-container .signup-form-submit {
  justify-content:flex-end;
  margin-block-start:17px;
}
html body .theme-portal-form-container :is(.theme-already-signin-info,.theme-noaccount-signup) {
  margin-block-start:20px;
  font-size:14px;
  line-height:1.6;
  color:#526478;
  text-align:center;
}
html body .theme-portal-form-container :is(
  .theme-already-signin-info,.theme-noaccount-signup,.theme-forgotpassword-back
) a {
  color:#004aad;
  font-weight:600;
  text-underline-offset:3px;
}
html body .theme-portal-form-container :is(
  .theme-already-signin-info,.theme-noaccount-signup,.theme-forgotpassword-back
) a:is(:hover,:focus-visible) {
  color:#003b88;
  text-decoration:underline;
}
html body .theme-portal-form-container .signupotpcontainer .verifyheader {
  line-height:1.55;
  color:#526478;
}
html body .theme-portal-form-container .signupotpcontainer .resendotp {
  font-size:14px;
  color:#004aad;
}
html body .theme-portal-form-container .za-submitbtn-otp .signupbtn {
  min-height:46px;
  padding:11px 25px !important;
  border-radius:12px;
  font:600 15px/1.3 'Poppins',sans-serif;
  letter-spacing:.04em;
  background:#004aad;
  color:#fff;
}
html body .theme-portal-form-container .za-submitbtn-otp .signupbtn:hover {
  background:#003b88;
}
html body .theme-portal-form-container .signin-iframe {
  display:block;
  width:100%;
  max-width:100%;
  border:0;
  background:transparent;
}
/* Zoho's credential form lives in a separate iframe/document. */
body:has(.signin_container) {
  background:transparent !important;
  color:#263b51;
}
.signin_container,
.signin_container .signin_box,
.recovery_container {
  box-sizing:border-box;
  max-width:100%;
}
.signin_container {
  width:100%;
  margin:0 auto;
}
.signin_container :is(#headtitle,.rec_head_text) {
  font:500 clamp(28px,4vw,34px)/1.2 'Oswald','Poppins',sans-serif;
  letter-spacing:.01em;
  text-transform:none;
  color:#173b60;
}
.signin_container .signin_head {
  margin-block-end:18px;
}
.signin_container :is(.service_name,.head_info,.backup_desc) {
  color:#526478;
  font:400 14px/1.6 'Poppins',sans-serif;
}
.signin_container .textbox_div {
  margin-block-end:18px;
}
.signin_container :is(input.textbox,select,textarea,.recovery_container .otp_container) {
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  min-height:49px;
  height:49px;
  padding:12px 14px;
  background:#fff;
  border:1px solid #c9d6e4;
  border-radius:12px;
  color:#263b51;
  font:400 16px/1.4 'Poppins',sans-serif;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.signin_container :is(input.textbox,select,textarea):focus {
  border-color:#004aad;
  box-shadow:0 0 0 3px rgba(0,74,173,.11);
}
.signin_container :is(input.textbox,select,textarea):focus-visible {
  outline:2px solid #004aad;
  outline-offset:2px;
}
.signin_container :is(input.textbox,textarea)::placeholder {
  color:#788797;
  opacity:1;
}
.signin_container input.errorborder {
  border-color:#c83243;
}
.signin_container .btn.blue,
.signin_container .btn.green {
  box-sizing:border-box;
  min-height:46px;
  padding:11px 25px;
  border:0;
  border-radius:12px;
  background:#004aad;
  color:#fff;
  font:600 15px/1.3 'Poppins',sans-serif;
  letter-spacing:.01em;
  box-shadow:0 6px 14px rgba(0,74,173,.17);
}
.signin_container :is(.btn.blue,.btn.green):is(:hover,:focus-visible) {
  background:#003b88;
}
.signin_container :is(.btn.blue,.btn.green):focus-visible {
  outline:2px solid #004aad;
  outline-offset:3px;
}
.signin_container :is(.hellouser,.user_info,.otpmobile) {
  border:1px solid #c9d6e4;
  border-radius:12px;
  background:#f5f8fc;
  color:#263b51;
}
.signin_container :is(.bluetext,.bluetext_action,.Notyou,.bottom_option) {
  color:#004aad;
}
.signin_container .fielderror,
.user-signup-form-container .field-error-msg {
  color:#b6293d;
  line-height:1.5;
}
@media (max-width:600px) {
  body:has(.theme-portal-form-container) .theme-branding-info {
    padding:13px 12px 2px;
  }
  html body .theme-portal-form-container {
    width:calc(100% - 20px);
    margin:12px auto 28px;
    padding:clamp(18px,5vw,26px);
    border-radius:20px;
    box-shadow:0 12px 30px rgba(28,56,83,.10),inset 0 1px 0 #fff;
  }
  html body .theme-portal-form-container .theme-portal-heading {
    margin-block-end:20px;
  }
  html body .theme-portal-form-container .signup-form-submit {
    justify-content:stretch;
  }
  html body .theme-portal-form-container .signup-form-submit .signup-button {
    width:100%;
  }
  .signin_container .btn.blue,
  .signin_container .btn.green {
    width:100%;
  }
}
@media (max-width:380px) {
  html body .theme-portal-form-container .phone-input-wrapper .phone-input-group {
    flex-basis:82px;
    width:82px;
    min-width:82px;
  }
  html body .theme-portal-form-container .phone-input-wrapper {
    gap:7px;
  }
}
@media (prefers-reduced-motion:reduce) {
  html body .theme-portal-form-container :is(input,textarea,select,button),
  .signin_container :is(input,textarea,select,button) {
    transition:none !important;
  }
}