.sms-body, .sms-body * {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.sms-body {font-size:14px;line-height:18px;}
.sms-customize-body {background:#f6f5f7;}
.sms-body h1, .sms-body h2, .sms-body h3, .sms-body h4 {display: inline-block; margin: 0; padding: 0; font-weight: normal; width: 100%;}
.sms-box {max-width: 360px; margin: 20px auto 80px auto;}
.sms-box > .sms-wrap {display: block; width: 100%; margin: 0; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.08); border-radius: 5px;}
.sms-wrap h2 {padding: 20px 20px 25px 20px; border-bottom: 1px solid rgba(0,0,0,0.1); display: block; font-size: 21px;}
.sms-inside {padding: 20px; display: inline-block; width: 100%;}
.sms-body label {display: block; width: 100%; margin: 0 0 5px 0;font-weight:bolder;}
.sms-body .sms-row {display:inline-block;width:100%;margin:0 0 20px 0;}
.sms-body .sms-row.sms-rsnd {margin-top:20px;}
.sms-body input[type="text"], .sms-body input[type="tel"], .sms-body input[type="email"] {width:100%;height:auto;padding: 8px; font-size: 14px; line-height: 18px; border: 1px solid rgba(0,0,0,0.2);margin:0; border-radius: 3px; box-shadow: none; outline: none; background: #fff;}
.sms-body input[type="text"]:hover, .sms-body input[type="tel"]:hover, .sms-body input[type="email"]:hover {border-color: rgba(0,0,0,0.3);}
.sms-body input[type="text"].error, .sms-body input[type="tel"].error, .sms-body input[type="email"].error {background:#ffecec;}
.sms-body .sms-button, .sms-body .sms-button-resend {text-decoration:none;position: relative; text-align: center; float: left; background: #0d9ecc; width:100%;color: #fff!important; padding: 9px 10px; font-size: 14px; line-height: 18px; font-weight:bold;border: 1px solid rgba(0,0,0,0.05); border-bottom-color: rgba(0,0,0,0.1); border-radius: 4px; box-shadow: none; outline: none; cursor: pointer; transition: 0.1s;}
.sms-body .sms-button:not(.disabled):not(.loading):hover, .sms-body .sms-button-resend:not(.disabled):not(.loading):hover {text-decoration: none; opacity: 0.8;text-decoration:none;}
.sms-body .sms-button.disabled, .sms-body .sms-button-resend.disabled {opacity: 0.5; cursor: not-allowed;}
.sms-body .sms-button.loading, .sms-body .sms-button-resend.loading {opacity: 0.5; cursor: wait;position:relative;}
.sms-body .sms-button.loading:before, .sms-body .sms-button-resend.loading:before {content: "\f110"; font-family: "FontAwesome","Font Awesome 5 Free"; position: absolute; left: 10px; top: 8px;animation: smsSpin 1.5s linear infinite;}
.sms-body .sms-button-resend {background:#777!important;}
.sms-body .sms-only-text {font-size:14px;display:block;float:left;clear:both;width:100%;}
.sms-body input[type="text"].sms-code {float:left;width:23%;margin-right:2.65%;text-align:center;font-size:26px;line-height:30px;padding:15px 5px!important;height:62px!important;margin-top:8px;margin-bottom:4px;}
.sms-body input[type="text"].sms-code#code4 {margin-right:0;}
.sms-body .sms-row.sms-error {text-align:center;width: 100%; padding: 10px; font-size: 13px; font-weight: bold; background: #e68383; color: #fff; border-radius: 3px; margin: 0 0 20px 0;display:inline-block;}
.sms-body .sms-row.sms-success {text-align:center;width: 100%; padding: 10px; font-size: 14px; font-weight: bold; background: #43d6a0; color: #fff; border-radius: 3px; margin: 0 0 20px 0;display:inline-block;}

@keyframes smsSpin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

.intl-tel-input .country-list {min-width:240px;}
.intl-tel-input .country-list.dropup {width:auto;max-width:320px;}
.intl-tel-input .flag-container {left:0;}
.intl-tel-input .flag-container + input[type="text"] {padding-left:45px!important;}
.intl-tel-input .flag-container .fa {display:none!important;}
.intl-tel-input .sms-validation {clear: both; display: inline-block; position: absolute; right: 8px; font-size: 11px; font-style: normal; color: #888; letter-spacing: -0.2px; line-height: 16px; top: 50%; margin-top: -8px;}
.sms-body .intl-tel-input {width:100%;display:inline-block;}
.input-box > .intl-tel-input {float: left; z-index: 12; width: 100%; }
.add_item .input-box > .intl-tel-input input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="submit"]) {padding-left:45px!important;}

.sms-bo-user-ver {display:block;width:100%;padding-top:2px;}
.sms-bo-user-ver span {display:inline-block;width:auto;height:18px;overflow:hidden;border:1px solid rgba(0,0,0,0.1);padding:2px 5px 2px 23px;position:relative;font-size:10px;font-weight:500;line-height:12px;border-radius:4px;margin:0;}
.sms-bo-user-ver span.sms-missing {background:#e0e0e0;color:#555;}
.sms-bo-user-ver span.sms-error {background:#e85d5d;color:#fff;}
.sms-bo-user-ver span.sms-ok {background:#39c476;color:#fff;text-transform: uppercase; letter-spacing: 0.5px;}
.sms-bo-user-ver span:before {font-weight:normal;position:absolute;width:18px;height:18px;top:-1px;left:-1px;text-align:center;line-height:18px;font-size:12px;text-indent:1px;background:rgba(0,0,0,0.1);border-right:1px solid rgba(0,0,0,0.1);border-radius:4px 0 0 4px;color:rgba(0,0,0,0.4);font-family:"FontAwesome","Font Awesome 5 Free";}
.sms-bo-user-ver span.sms-missing:before {content:"\f128";color:#444;}
.sms-bo-user-ver span.sms-error:before {content:"\f00d";color:rgba(255,255,255,0.9);}
.sms-bo-user-ver span.sms-ok:before {content:"\f00c";color:rgba(255,255,255,0.9);}

/* ========================================================================== */
/* EPSILON-STYLE PILL BUTTONS for SMS verification UI (UI only)                */
/* Matches login tabs look: outlined (inactive) + filled (active) + blur state */
/* ========================================================================== */

/* --- Containers (item-post + profile phone cards) --- */
#sms-post-verify,                              /* item-post verification panel */
.sms-phone-card {                              /* profile phone blocks */
  border: 1px solid #e2c8ff !important;        /* lavender border */
  background: #f7f1ff !important;              /* pale lavender fill */
  border-radius: 16px !important;              /* softer card corners */
}

/* --- Spacing between panel title and description (ONLY inside #sms-post-verify) --- */
#sms-post-verify .sms-panel-head h2 {
  margin-bottom: 10px !important;               /* add space under title */
}

#sms-post-verify .sms-panel-head p.small {
  margin-top: 0 !important;                    /* prevent collapsing upward */
  margin-bottom: 0 !important;                 /* keep the header compact */
}

/* ========================================================================== */
/* XETHIO - Primary phone field (rounded + site colors)                        */
/* Scope: ONLY the main phone input inside #sms-post-verify                    */
/* ========================================================================== */

#sms-post-verify .sms-panel-body .sms-phone-input,
#sms-post-verify .sms-panel-body .intl-tel-input input[type="tel"],
#sms-post-verify .sms-panel-body .intl-tel-input input[type="text"] {
  border-radius: 18px !important; /* rounded edges (not pill) */
  border: 1px solid #e2c8ff !important; /* lavender border to match panel */
  background: #ffffff !important; /* clean white field */
  box-shadow: none !important; /* keep crisp (no default shadows) */
  outline: none !important; /* we’ll handle focus ring below */
  transition: border-color 0.2s ease, box-shadow 0.2s ease; /* smooth feedback */
}

#sms-post-verify .sms-panel-body .sms-phone-input:hover,
#sms-post-verify .sms-panel-body .intl-tel-input input[type="tel"]:hover,
#sms-post-verify .sms-panel-body .intl-tel-input input[type="text"]:hover {
  border-color: rgba(122,77,158,0.55) !important; /* gentle purple tint on hover */
}

#sms-post-verify .sms-panel-body .sms-phone-input:focus,
#sms-post-verify .sms-panel-body .intl-tel-input input[type="tel"]:focus,
#sms-post-verify .sms-panel-body .intl-tel-input input[type="text"]:focus {
  border-color: #7a4d9e !important; /* Epsilon purple focus border */
  box-shadow: 0 0 0 3px rgba(122,77,158,0.18) !important; /* soft purple ring */
}

/* --- Base pill behavior for all verification-related buttons/links --- */
#sms-post-verify .sms-edit-phone,
#sms-post-verify .sms-send-code,
#sms-post-verify .sms-verify-code,
#sms-otp-help-modal .sms-otp-ux-telegram,
#sms-otp-help-modal .sms-otp-ux-whatsapp,
.sms-phone-card .sms-edit-phone,
.sms-phone-card .sms-send-code,
.sms-phone-card .sms-verify-code,
.sms-phone-card button[name="osp_profile_phone_save"],
.sms-body.sms-verify .sms-button,
.sms-body.sms-verify .sms-button-resend,
.sms-body.sms-verify #smsBackToNumber,
.sms-body.sms-verify #smsWhatsAppLink,
.sms-body.sms-verify #smsTelegramLink {
  border-radius: 999px !important;             /* pill shape */
  font-weight: 600 !important;                 /* tab-like weight */
  letter-spacing: 0.02em !important;           /* subtle tracking */
  text-decoration: none !important;            /* remove link underline */
  transition:                                   /* smooth blur/unblur + color */
    background-color 0.2s ease,                /* bg transition */
    color 0.2s ease,                           /* text transition */
    border-color 0.2s ease,                    /* border transition */
    box-shadow 0.2s ease,                      /* glow transition */
    transform 0.1s ease,                       /* tiny lift */
    filter 0.2s ease,                          /* blur/unblur */
    opacity 0.2s ease !important;              /* fade */
}

/* Make the WA/TG links act like buttons visually */
.sms-body.sms-verify #smsWhatsAppLink,
.sms-body.sms-verify #smsTelegramLink {
  display: inline-flex !important;             /* button-like layout */
  align-items: center !important;              /* vertical center */
  justify-content: center !important;          /* center text */
  padding: 9px 12px !important;                /* button padding */
  width: 100% !important;                      /* full width like plugin buttons */
}


/* ========================================================================== */
/* XETHIO - Item-post OTP messaging placement + no-flash (UI-only)             */
/* Scope: ONLY #sms-post-verify                                                */
/* ========================================================================== */

#sms-post-verify .sms-inline-msg {
  margin-top: 10px !important;                 /* spacing under control */
  font-size: 13px !important;                  /* compact status size */
  line-height: 1.25 !important;                /* tight but readable */
  font-weight: 600 !important;                 /* clear emphasis */
  word-break: break-word !important;           /* prevent overflow on long text */
  transition: none !important;                 /* prevent fade flash */
  animation: none !important;                  /* prevent animation flash */
}

#sms-post-verify .sms-inline-msg--send {
  margin-top: 10px !important;                 /* sits directly under Send code */
}

#sms-post-verify .sms-inline-msg--otp {
  margin-top: 8px !important;                  /* sits directly under OTP row */
}

#sms-post-verify .sms-inline-msg.error {
  color: rgba(184,74,74,0.95) !important;       /* muted red (unverified tone) */
}

#sms-post-verify .sms-inline-msg.success {
  color: rgba(43,138,90,0.95) !important;       /* green success */
}

#sms-post-verify .sms-inline-msg.info {
  color: rgba(79,42,110,0.85) !important;       /* theme purple info */
}

#sms-post-verify .sms-otp-help-link {
  display: inline-block !important;            /* stable tap target */
  margin-top: 10px !important;                 /* spacing under messages */
}


/* ========================================================================== */
/* XETHIO - Confirm modal buttons (stack full-width)                           */
/* Scope: confirmation modal generated by item-post.php                        */
/* ========================================================================== */

.sms-otp-confirm-actions {
  display: flex !important;                     /* force flex layout */
  flex-direction: column !important;            /* stack vertically */
  gap: 10px !important;                         /* space between buttons */
  width: 100% !important;                       /* full-width container */
  align-items: stretch !important;              /* stretch children full width */
}

.sms-otp-confirm-actions button,
.sms-otp-confirm-actions [data-sms-confirm-send],
.sms-otp-confirm-actions [data-sms-confirm-edit] {
  width: 100% !important;                       /* full-width buttons */
  min-width: 0 !important;                      /* override any min-width rules */
}

/* --- PRIMARY (filled / active tab look) --- */
#sms-post-verify .sms-send-code,
#sms-post-verify .sms-verify-code,
#sms-otp-help-modal .sms-otp-ux-telegram,
#sms-otp-help-modal .sms-otp-ux-whatsapp,
.sms-phone-card .sms-send-code,
.sms-phone-card .sms-verify-code,
.sms-phone-card button[name="osp_profile_phone_save"],
.sms-body.sms-verify .sms-button,
.sms-body.sms-verify #smsWhatsAppLink,
.sms-body.sms-verify #smsTelegramLink {
  background: #7a4d9e !important;              /* Epsilon purple */
  border: 1px solid #7a4d9e !important;        /* match fill */
  color: #ffffff !important;                   /* white text */
  box-shadow: 0 2px 4px rgba(122,77,158,.15),  /* soft glow */
              0 4px 10px rgba(122,77,158,.25) !important; /* deeper glow */
}

#sms-post-verify .sms-send-code:hover,
#sms-post-verify .sms-verify-code:hover,
#sms-otp-help-modal .sms-otp-ux-telegram:hover,
#sms-otp-help-modal .sms-otp-ux-whatsapp:hover,
.sms-phone-card .sms-send-code:hover,
.sms-phone-card .sms-verify-code:hover,
.sms-phone-card button[name="osp_profile_phone_save"]:hover,
.sms-body.sms-verify .sms-button:hover,
.sms-body.sms-verify #smsWhatsAppLink:hover,
.sms-body.sms-verify #smsTelegramLink:hover {
  transform: translateY(-1px) !important;      /* tiny lift */
  opacity: 0.96 !important;                    /* subtle hover feedback */
}

/* --- SECONDARY (outlined / inactive tab look) --- */
#sms-post-verify .sms-edit-phone,
.sms-phone-card .sms-edit-phone,
.sms-body.sms-verify .sms-button-resend,
.sms-body.sms-verify #smsBackToNumber {
  background: transparent !important;          /* outline style */
  color: #7a4d9e !important;                   /* purple text */
  border: 1px solid #e2c8ff !important;        /* lavender border */
  box-shadow: none !important;                 /* no glow */
}

#sms-post-verify .sms-edit-phone:hover,
.sms-phone-card .sms-edit-phone:hover,
.sms-body.sms-verify .sms-button-resend:hover,
.sms-body.sms-verify #smsBackToNumber:hover {
  background: rgba(122,77,158,.08) !important; /* same hover tint as tabs */
}

/* --- Focus ring (keyboard) --- */
#sms-post-verify .sms-edit-phone:focus-visible,
#sms-post-verify .sms-send-code:focus-visible,
#sms-post-verify .sms-verify-code:focus-visible,
#sms-otp-help-modal .sms-otp-ux-telegram:focus-visible,
#sms-otp-help-modal .sms-otp-ux-whatsapp:focus-visible,
.sms-phone-card .sms-edit-phone:focus-visible,
.sms-phone-card .sms-send-code:focus-visible,
.sms-phone-card .sms-verify-code:focus-visible,
.sms-phone-card button[name="osp_profile_phone_save"]:focus-visible,
.sms-body.sms-verify .sms-button:focus-visible,
.sms-body.sms-verify .sms-button-resend:focus-visible,
.sms-body.sms-verify #smsBackToNumber:focus-visible,
.sms-body.sms-verify #smsWhatsAppLink:focus-visible,
.sms-body.sms-verify #smsTelegramLink:focus-visible {
  outline: none !important;                    /* avoid default outline */
  box-shadow: 0 0 0 3px rgba(122,77,158,.28) !important; /* purple ring */
}

/* --- Disabled/blurred state (matches “blur/unblur” requirement) --- */
#sms-post-verify .sms-edit-phone:disabled,
#sms-post-verify .sms-send-code:disabled,
#sms-post-verify .sms-verify-code:disabled,
#sms-post-verify .sms-edit-phone[disabled],
#sms-post-verify .sms-send-code[disabled],
#sms-post-verify .sms-verify-code[disabled],
#sms-post-verify .sms-edit-phone.disabled,
#sms-post-verify .sms-send-code.disabled,
#sms-post-verify .sms-verify-code.disabled,
#sms-post-verify .sms-edit-phone.loading,
#sms-post-verify .sms-send-code.loading,
#sms-post-verify .sms-verify-code.loading,
.sms-phone-card .sms-edit-phone:disabled,
.sms-phone-card .sms-send-code:disabled,
.sms-phone-card .sms-verify-code:disabled,
.sms-phone-card .sms-edit-phone[disabled],
.sms-phone-card .sms-send-code[disabled],
.sms-phone-card .sms-verify-code[disabled],
.sms-phone-card .sms-edit-phone.disabled,
.sms-phone-card .sms-send-code.disabled,
.sms-phone-card .sms-verify-code.disabled,
.sms-phone-card .sms-edit-phone.loading,
.sms-phone-card .sms-send-code.loading,
.sms-phone-card .sms-verify-code.loading,
.sms-phone-card button[name="osp_profile_phone_save"]:disabled,
.sms-phone-card button[name="osp_profile_phone_save"][disabled],
.sms-phone-card button[name="osp_profile_phone_save"].disabled,
.sms-phone-card button[name="osp_profile_phone_save"].loading,
.sms-body.sms-verify .sms-button.disabled,
.sms-body.sms-verify .sms-button.loading,
.sms-body.sms-verify .sms-button:disabled,
.sms-body.sms-verify .sms-button-resend.disabled,
.sms-body.sms-verify .sms-button-resend.loading,
.sms-body.sms-verify .sms-button-resend:disabled,
.sms-body.sms-verify #smsBackToNumber.disabled,
.sms-body.sms-verify #smsBackToNumber.loading,
.sms-body.sms-verify #smsBackToNumber:disabled,
.sms-body.sms-verify #smsWhatsAppLink.disabled,
.sms-body.sms-verify #smsTelegramLink.disabled {
  opacity: 0.55 !important;                    /* faded */
  filter: blur(0.9px) saturate(0.9) !important;/* blurred look */
  transform: none !important;                  /* no lift */
  box-shadow: none !important;                 /* remove glow */
  cursor: not-allowed !important;              /* disabled cursor */
}

/* Loading cursor (keep spinner behavior, UI only) */
.sms-body.sms-verify .sms-button.loading,
#sms-post-verify .loading,
.sms-phone-card .loading {
  cursor: wait !important;                     /* loading cursor */
}

/* ========================================================================== */
/* XETHIO - Icon pills under primary phone (inside #sms-post-verify)           */
/* ========================================================================== */

/* ========================================================================== */
/* XETHIO (Option A): Contact preferences Bottom Sheet (mobile-first)          */
/* Scope: ONLY #sms-post-verify                                                */
/* ========================================================================== */

#sms-post-verify .xethio-pref-trigger { 
  -webkit-appearance: none; /* remove default iOS button */ 
  appearance: none; /* remove default button */ 
  display: inline-flex; /* button-like row */ 
  align-items: center; /* center */ 
  gap: 5px; /* tighter spacing */ 
  cursor: pointer; /* clickable */ 
  user-select: none; /* prevent highlight */ 
  padding: 3px 7px; /* smaller button */ 
  margin-top: -10px; /* closer to phone field */ 
  border: 1px solid rgba(226,200,255,1); /* soft border */ 
  border-radius: 999px; /* pill */ 
  background: rgba(255,255,255,0.55); /* subtle fill */ 
  color: #7a4d9e; /* match your purple */ 
  font: inherit; /* match website font family/size/weight */ 
  font-weight: 600; /* heavier label */ 
  line-height: 1; /* tighter height */ 
} 

#sms-post-verify .xethio-pref-trigger::after { 
  content: ""; /* chevron */ 
  width: 0; /* triangle */ 
  height: 0; /* triangle */ 
  border-left: 5px solid transparent; /* left */ 
  border-right: 5px solid transparent; /* right */ 
  border-top: 6px solid rgba(122,77,158,0.75); /* chevron tint */ 
  transform: rotate(0deg); /* closed */ 
  transition: transform 180ms ease; /* smooth */ 
}

#sms-post-verify .xethio-pref-trigger[aria-expanded="true"]::after { 
  transform: rotate(180deg); /* open */ 
}

/* Overlay wrapper */
#sms-post-verify .xethio-pref-overlay { 
  position: fixed; /* viewport overlay */ 
  inset: 0; /* full screen */ 
  z-index: 9998; /* sits above page UI */ 
  opacity: 0; /* hidden */ 
  visibility: hidden; /* hidden */ 
  pointer-events: none; /* no clicks when closed */ 
  transition: opacity 180ms ease, visibility 0s linear 180ms; /* fade */ 
}

#sms-post-verify .xethio-pref-overlay.is-open { 
  opacity: 1; /* visible */ 
  visibility: visible; /* visible */ 
  pointer-events: auto; /* clickable */ 
  transition: opacity 180ms ease; /* fade */ 
}

/* Backdrop */
#sms-post-verify .xethio-pref-backdrop { 
  position: absolute; /* cover */ 
  inset: 0; /* full screen */ 
  background: rgba(0,0,0,0.55); /* dim */ 
}

/* Bottom sheet panel */
#sms-post-verify .xethio-pref-sheet { 
  position: absolute; /* anchor */ 
  left: 0; /* full width */ 
  right: 0; /* full width */ 
  bottom: 0; /* bottom */ 
  margin-left: auto; /* center */ 
  margin-right: auto; /* center */ 
  width: 100%; /* mobile full width */ 
  max-width: 560px; /* comfortable on tablet/desktop */ 
  background: rgba(255,255,255,1); /* sheet surface */ 
  border-radius: 18px 18px 0 0; /* rounded top */ 
  box-shadow: 0 -12px 40px rgba(0,0,0,0.25); /* lift */ 
  transform: translateY(110%); /* off-canvas */ 
  transition: transform 220ms ease; /* slide */ 
  max-height: 85vh; /* within screen */ 
  overflow: auto; /* sheet scroll */ 
  -webkit-overflow-scrolling: touch; /* smooth iOS */ 
  overscroll-behavior: contain; /* keep scroll inside */ 
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom)) 16px; /* safe area */ 
}

#sms-post-verify .xethio-pref-overlay.is-open .xethio-pref-sheet { 
  transform: translateY(0); /* slide in */ 
}

#sms-post-verify .xethio-pref-sheet-handle { 
  width: 44px; /* handle width */ 
  height: 5px; /* handle height */ 
  margin: 0 auto 10px auto; /* center */ 
  border-radius: 999px; /* pill */ 
  background: rgba(0,0,0,0.18); /* subtle */ 
}

#sms-post-verify .xethio-pref-sheet-head { 
  display: flex; /* row */ 
  align-items: flex-start; /* top align */ 
  justify-content: space-between; /* title left, close right */ 
  gap: 12px; /* spacing */ 
  padding: 0 0 10px 0; /* breathing room */ 
}

#sms-post-verify .xethio-pref-sheet-headtext h3 { 
  margin: 0; /* tight */ 
  font-size: 16px; /* clear title */ 
  font-weight: 700; /* emphasis */ 
  color: #4f2a6e; /* deep purple */ 
}

#sms-post-verify .xethio-pref-help { 
  margin: 4px 0 0 0; /* tight */ 
  font-size: 13px; /* helper size */ 
  line-height: 1.35; /* readable */ 
  color: rgba(79,42,110,0.75); /* muted */ 
}

#sms-post-verify .xethio-pref-close { 
  border: 0; /* no default */ 
  background: transparent; /* no fill */ 
  color: #7a4d9e; /* theme purple */ 
  font-size: 22px; /* tap target */ 
  line-height: 1; /* tight */ 
  padding: 6px 8px; /* touch */ 
  margin: -6px -8px 0 0; /* align */ 
  cursor: pointer; /* clickable */ 
}

#sms-post-verify .xethio-pref-sheet-body { 
  padding: 6px 0 0 0; /* spacing */ 
}

#sms-post-verify .xethio-pref-section-label { 
  font-size: 13px; /* label */ 
  font-weight: 700; /* emphasis */ 
  color: rgba(79,42,110,0.85); /* theme */ 
  margin: 0 0 6px 0; /* space under */ 
}

/* Tighten the existing attrs block inside the sheet (keeps your selectors intact) */
#sms-post-verify .xethio-pref-sheet .xethio-phone-attrs { 
  margin-top: 0; /* no extra gap */ 
  padding-top: 0; /* no extra */ 
}

#sms-post-verify .xethio-pref-sheet .xethio-icon-pills { 
  margin-top: 0; /* remove drawer spacing */ 
}

/* Divider BELOW icons + show/hide (keeps your existing divider element) */
#sms-post-verify .xethio-pref-sheet .xethio-attrs-divider { 
  margin: 12px 14px 0 14px; /* consistent inset */ 
}

/* Prevent background scroll while sheet is open */
html.xethio-sheet-open { 
  overflow: hidden; /* lock */ 
}

body.xethio-sheet-open { 
  overflow: hidden; /* lock */ 
}

#sms-post-verify .xethio-phone-attrs {
  margin-top: 8px; /* space under drawer summary */ 
  padding-top: 0; /* keep tight */ 
  border-top: 0; /* no top divider */ 
  width: 100% !important; /* prevent shrink that forces vertical stacking */ 
  clear: both !important; /* ensure it sits below any floated phone UI */ 
  display: flex; /* layout */ 
  flex-direction: column; /* stack rows */ 
  gap: 10px; /* spacing */ 
}

/* Force icon pills into a horizontal row right under phone field */
#sms-post-verify .xethio-icon-pills {
  width: 100% !important; /* full row */ 
  display: flex !important; /* force flex row */ 
  flex-direction: row !important; /* horizontal */ 
  flex-wrap: nowrap !important; /* no stacking */ 
  justify-content: flex-start !important; /* group icons on the left */ 
  align-items: center !important; /* center */ 
  gap: 12px !important; /* <-- THIS NUMBER controls spacing between icons */
  margin-top: 6px; /* clean spacing inside drawer */ 
  padding: 0 14px 6px 4px; /* inset + small bottom */ 
  border-bottom: 0; /* divider moved below show/hide */ 
}

#sms-post-verify .xethio-attrs-divider { 
  border-top: 1px solid rgba(0,0,0,0.08); /* divider */ 
  margin: 10px 14px 0 14px; /* align with icon padding */ 
}

/* IMPORTANT: global .sms-body label { width:100% } breaks icons -> override it */
#sms-post-verify .xethio-icon-pills > label.xethio-icon-pill {
  display: inline-flex !important; /* keep inline */
  width: auto !important; /* stop full-width label */
  flex: 0 0 auto !important; /* don’t stretch */
  margin: 0 !important; /* clean */
  cursor: pointer; /* clickable */
  user-select: none; /* UX */
}

/* Row UNDER icons: Show/Hide + Save aligned to the right */
#sms-post-verify .xethio-attrs-row {
  width: 100% !important; /* full row */
  display: flex !important; /* row */
  justify-content: flex-end !important; /* right side */
  align-items: center !important; /* align */
  gap: 10px; /* spacing */
  margin-top: 10px; /* space under icons */
  flex-wrap: nowrap !important; /* keep on one line */
}

#sms-post-verify .xethio-showhide-group { 
  display: flex; /* stack title + control */ 
  flex-direction: column; /* vertical */ 
  align-items: flex-end; /* keep it aligned to the right like before */ 
  gap: 6px; /* space */ 
} 

#sms-post-verify .xethio-showhide-title { 
  font-size: 13px; /* small title */ 
  font-weight: 600; /* readable */ 
  opacity: 0.85; /* understated */ 
} 

#sms-post-verify .xethio-seg-wrap { 
  display: inline-flex; /* keep compact */ 
  flex-direction: column; /* captions under */ 
  align-items: stretch; /* match widths */ 
} 

#sms-post-verify .xethio-seg-captions { 
  display: grid; /* two equal labels */ 
  grid-template-columns: 1fr 1fr; /* show / hide */ 
  width: calc(44px * 2); /* match your .xethio-seg-face width */ 
  margin-top: 4px; /* small gap */ 
  font-size: 12px; /* understated */ 
  font-weight: 600; /* readable */ 
  opacity: 0.75; /* soft */ 
  text-align: center; /* centered */ 
} 

/* Optional: prevent Show/Hide segment labels from becoming full-width */
#sms-post-verify .xethio-seg-icons > label.xethio-seg-icon {
  width: auto !important; /* stop global label width:100% */
  flex: 0 0 auto !important; /* don’t stretch in flex */
}

/* (Optional) If Show/Hide segments stretch, force them to stay compact */
#sms-post-verify .xethio-seg-icons > label.xethio-seg-icon {
  width: auto !important; /* prevent full-width */
  flex: 0 0 auto !important; /* don’t stretch */
}

#sms-post-verify .xethio-icon-pill input[type="checkbox"] {
  position: absolute; /* hide input */
  opacity: 0; /* keep accessible */
  width: 1px; /* tiny */
  height: 1px; /* tiny */
  pointer-events: none; /* label handles click */
}

#sms-post-verify .xethio-pill-face {
  width: 34.5px; /* smaller outer circle */
  height: 32px; /* smaller outer circle */
  display: inline-flex; /* center icon */
  align-items: center; /* center */
  justify-content: center; /* center */
  border-radius: 999px; /* circle */
  border: 0.75px solid currentColor; /* lavender border */
  background: transparent; /* inactive */
  color: #7a4d9e; /* purple icon */
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; /* smooth */
}

#sms-post-verify .xethio-icon-pill:hover .xethio-pill-face {
  background: rgba(122,77,158,0.08); /* hover tint */
}

#sms-post-verify .xethio-icon-pill input[type="checkbox"]:checked + .xethio-pill-face {
  background: #7a4d9e; /* active fill */
  border-color: #7a4d9e; /* active border */
  color: #ffffff; /* white icon */
  box-shadow: 0 2px 8px rgba(122,77,158,0.22); /* glow */
}

/* Segmented icons (Show / Hide) */
#sms-post-verify .xethio-seg-icons {
  display: inline-flex; /* segmented group */
  border: 1px solid rgba(226,200,255,1); /* border */
  border-radius: 999px; /* pill */
  overflow: hidden; /* clean edges */
}

#sms-post-verify .xethio-seg-icon {
  display: inline-flex; /* label */
  margin: 0; /* reset */
  cursor: pointer; /* clickable */
  user-select: none; /* UX */
}

#sms-post-verify .xethio-seg-icon input[type="radio"] {
  position: absolute; /* hide */
  opacity: 0; /* keep accessible */
  width: 1px; /* tiny */
  height: 1px; /* tiny */
  pointer-events: none; /* label handles */
}

#sms-post-verify .xethio-seg-face {
  width: 44px; /* tap size */
  height: 44px; /* tap size */
  display: inline-flex; /* center icon */
  align-items: center; /* center */
  justify-content: center; /* center */
  background: transparent; /* inactive */
  color: #7a4d9e; /* purple icon */
  transition: background-color 0.2s ease, color 0.2s ease; /* smooth */
}

#sms-post-verify .xethio-seg-icon + .xethio-seg-icon .xethio-seg-face {
  border-left: 1px solid rgba(226,200,255,1); /* segment divider */
}

#sms-post-verify .xethio-seg-icon input[type="radio"]:checked + .xethio-seg-face {
  background: #7a4d9e; /* active fill */
  color: #ffffff; /* white icon */
}

/* Save icon button as pill */
#sms-post-verify .xethio-save-icon {
  border-radius: 999px !important; /* pill */
  padding: 10px 14px; /* compact */
  min-height: 44px; /* tap size */
  display: inline-flex; /* center */
  align-items: center; /* center */
  justify-content: center; /* center */
  gap: 0; /* icon only */
}

/* Shared SVG look */
#sms-post-verify .xethio-svg {
  width: 22px; /* icon size (slightly larger) */
  height: 22px; /* icon size (slightly larger) */
  fill: none; /* stroke icon */
  stroke: currentColor; /* inherits */
  stroke-width: 1.6; /* lighter stroke weight */
  stroke-linecap: round; /* smooth */
  stroke-linejoin: round; /* smooth */
}

/* Icon pills: use filled brand-style SVGs + tighter geometry (only under phone) */
#sms-post-verify .xethio-icon-pills .xethio-svg {
  width: 20px; /* bigger inner icon */
  height: 20px; /* bigger inner icon */
  display: block; /* remove inline SVG baseline spacing */
  fill: currentColor; /* filled icons (brand + glyph) */
  stroke: none; /* prevent stroke styling from shared rule */
}

/* Micro-centering tweaks (only if needed; keep tiny so it stays consistent) */
#sms-post-verify .xethio-icon-pills .xethio-icon-pill--telegram .xethio-svg {
  transform: translateX(-0.4px) translateY(0.2px); /* visual center correction */
}

#sms-post-verify .xethio-icon-pills .xethio-icon-pill--whatsapp .xethio-svg {
  transform: translateX(0.3px) translateY(0px); /* visual center correction */
}

#sms-post-verify .xethio-icon-pills .xethio-icon-pill--sms .xethio-svg {
  transform: translateX(0.3px) translateY(0px); /* visual center correction */
}

#sms-post-verify .xethio-icon-pills .xethio-icon-pill--directcall .xethio-svg {
  transform: translateX(0.2px) translateY(0px); /* visual center correction */
}

/* Message text area */
#sms-post-verify .xethio-attrs-msg {
  font-size: 12.5px; /* compact */
  opacity: 0.9; /* subtle */
}

/* Screen-reader only text */
#sms-post-verify .xethio-sr-only {
  position: absolute; /* remove visually */
  width: 1px; /* tiny */
  height: 1px; /* tiny */
  padding: 0; /* reset */
  margin: -1px; /* off-screen */
  overflow: hidden; /* hide */
  clip: rect(0, 0, 0, 0); /* hide */
  white-space: nowrap; /* prevent wrap */
  border: 0; /* reset */
}

/* XETHIO (Bottom Sheet Layout Cleanup — UI only) */

/* Helper line under trigger */
#sms-post-verify .xethio-pref-helperline{
  display: none; /* hidden by default; JS shows only when status is Unverified */
  margin-top: 6px; /* spacing under trigger */
  margin-bottom: 8px; /* gap before Send code button */
  font-size: 12.5px; /* small helper size */
  line-height: 1.35; /* readable */
  color: rgba(79,42,110,0.75); /* muted purple */
  padding-left: 4px; /* align with trigger */
}

#sms-post-verify .xethio-pref-trigger:disabled + .xethio-pref-helperline{
  display: block; /* show helper only when the trigger is disabled */
}

/* ========================= */
/* PREVIEW CARD (TOP)        */
/* ========================= */

#sms-post-verify .xethio-pref-preview{
  display: flex; /* vertical stack */
  flex-direction: column; /* caption then row */
  gap: 8px; /* spacing between caption and row */
  padding: 10px 12px; /* inner padding */
  margin: 0 2px 12px 2px; /* spacing under preview */
  border: 1px solid rgba(226,200,255,1); /* soft border */
  border-radius: 16px; /* rounded card */
  background: rgba(247,241,255,0.55); /* light lavender fill */
}

#sms-post-verify .xethio-pref-preview-caption{
  font-size: 12.5px; /* caption size */
  line-height: 1.25; /* readable */
  color: rgba(79,42,110,0.75); /* muted */
}

#sms-post-verify .xethio-pref-preview-row{
  display: flex; /* flag + number + icons */
  align-items: center; /* centerline alignment */
  gap: 10px; /* spacing */
}

#sms-post-verify .xethio-pref-preview-flag{
  display: inline-flex; /* inline box */
  align-items: center; /* align */
  justify-content: center; /* center */
  pointer-events: none; /* non-clickable */
  flex: 0 0 auto; /* fixed */
}

#sms-post-verify .xethio-pref-preview-number{
  font-size: 14px; /* readable number */
  font-weight: 700; /* emphasis */
  color: #4f2a6e; /* deep purple */
  letter-spacing: 0.2px; /* subtle */
  white-space: nowrap; /* single line */
  overflow: hidden; /* clip */
  text-overflow: ellipsis; /* ellipsis */
  min-width: 0; /* allow shrink */
}

/* Inline preview icons: NO circles, smaller, non-clickable */
#sms-post-verify .xethio-pref-preview-icons{
  display: inline-flex; /* inline icon row */
  align-items: center; /* baseline/centerline alignment */
  gap: 8px; /* spacing between icons */
  margin-left: auto; /* push icons to the right edge */
  pointer-events: none; /* display-only */
  flex: 0 0 auto; /* fixed */
}

#sms-post-verify .xethio-pref-preview-icons .xethio-preview-pill{
  display: inline-flex; /* icon wrapper */
  align-items: center; /* center */
  justify-content: center; /* center */
  background: transparent; /* no circle background */
  box-shadow: none; /* no shadow */
  width: auto; /* natural size */
  height: auto; /* natural size */
  border-radius: 0; /* no rounding */
  padding: 0; /* no padding */
  color: #7a4d9e; /* purple icon */
}

#sms-post-verify .xethio-pref-preview-icons .xethio-svg{
  width: 16px; /* smaller than selection icons */
  height: 16px; /* smaller than selection icons */
  fill: currentColor; /* inherit color */
  stroke: none; /* keep clean */
}

/* ========================= */
/* CONTACT APPS GRID (CARDS) */
/* ========================= */

#sms-post-verify .xethio-pref-sheet .xethio-pref-section-label{
  font-size: 13px; /* label */
  font-weight: 700; /* emphasis */
  color: rgba(79,42,110,0.85); /* theme */
  margin: 0 0 8px 0; /* space under */
}

#sms-post-verify .xethio-pref-sheet .xethio-icon-pills{
  width: 100% !important; /* full width */
  display: grid !important; /* grid layout */
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 options */
  gap: 10px; /* even spacing */
  padding: 0 2px 12px 2px; /* align with other content */
  margin: 0; /* reset */
  border: 0; /* reset */
}

#sms-post-verify .xethio-pref-sheet .xethio-icon-pills > label.xethio-icon-pill{
  width: 100% !important; /* each cell full width */
  display: flex !important; /* card content */
  flex-direction: column !important; /* icon above label */
  align-items: center !important; /* centered */
  justify-content: center !important; /* centered */
  gap: 8px !important; /* spacing */
  margin: 0 !important; /* no extra margin */
  padding: 10px 8px !important; /* card padding */
  border: 1px solid rgba(226,200,255,1) !important; /* subtle outline */
  border-radius: 14px !important; /* pill-card shape */
  background: rgba(255,255,255,0.85) !important; /* clean surface */
  cursor: pointer; /* tappable */
  user-select: none; /* prevent highlight */
}

#sms-post-verify .xethio-pref-sheet .xethio-icon-pills > label.xethio-icon-pill:hover{
  background: rgba(122,77,158,0.06) !important; /* hover tint */
}

#sms-post-verify .xethio-pref-sheet .xethio-pill-face{
  width: 38px; /* icon container */
  height: 38px; /* icon container */
  display: inline-flex; /* center */
  align-items: center; /* center */
  justify-content: center; /* center */
  border-radius: 999px; /* soft circle around icon */
  border: 1px solid rgba(226,200,255,1); /* subtle ring */
  background: transparent; /* unselected */
  color: #7a4d9e; /* purple icon */
}

#sms-post-verify .xethio-pref-sheet .xethio-icon-pill input[type="checkbox"]:checked + .xethio-pill-face{
  background: #7a4d9e; /* selected fill */
  border-color: #7a4d9e; /* selected border */
  color: #ffffff; /* white icon */
  box-shadow: 0 2px 8px rgba(122,77,158,0.22); /* soft glow */
}

#sms-post-verify .xethio-pref-sheet .xethio-pill-label{
  display: block; /* label line */
  font-size: 11px; /* small */
  line-height: 1; /* tight */
  font-weight: 700; /* clear */
  color: rgba(79,42,110,0.78); /* muted */
  text-align: center; /* centered */
  white-space: nowrap; /* avoid wrap */
}

/* ========================= */
/* DIVIDER + TOGGLE SWITCH   */
/* ========================= */

#sms-post-verify .xethio-pref-sheet .xethio-attrs-divider{
  border-top: 1px solid rgba(0,0,0,0.08); /* divider */
  margin: 10px 2px 10px 2px; /* align with card edges */
}

#sms-post-verify .xethio-show-toggle-row{
  display: flex; /* title + switch */
  align-items: center; /* centerline */
  justify-content: space-between; /* spread */
  gap: 12px; /* spacing */
  padding: 2px 2px 0 2px; /* align with content */
}

#sms-post-verify .xethio-show-toggle-title{
  font-size: 13px; /* label size */
  font-weight: 700; /* emphasis */
  color: rgba(79,42,110,0.90); /* deep */
}

/* Switch */
#sms-post-verify .xethio-switch{
  position: relative; /* for track */
  display: inline-flex; /* compact */
  align-items: center; /* center */
  justify-content: center; /* center */
}

#sms-post-verify .xethio-switch input[type="checkbox"]{
  position: absolute; /* hide real checkbox */
  opacity: 0; /* visually hidden */
  width: 1px; /* tiny */
  height: 1px; /* tiny */
  pointer-events: none; /* UI handled by label */
}

#sms-post-verify .xethio-switch-ui{
  width: 52px; /* track width */
  height: 32px; /* track height */
  border-radius: 999px; /* pill */
  border: 1px solid rgba(226,200,255,1); /* lavender outline */
  background: rgba(255,255,255,0.95); /* off state */
  position: relative; /* knob anchor */
  transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out; /* smoother + more premium */
}

#sms-post-verify .xethio-switch-ui::before{
  content: ""; /* knob */
  position: absolute; /* inside track */
  top: 3px; /* inset */
  left: 3px; /* inset */
  width: 26px; /* knob size */
  height: 26px; /* knob size */
  border-radius: 999px; /* round */
  background: #7a4d9e; /* knob color (OFF) */
  will-change: transform; /* smoother knob movement */
  transition: transform 200ms ease-in-out, background-color 200ms ease-in-out; /* subtle + professional */
}

#sms-post-verify .xethio-switch input[type="checkbox"]:checked + .xethio-switch-ui{
  background: #7a4d9e; /* ON track */
  border-color: #7a4d9e; /* ON border */
}

#sms-post-verify .xethio-switch input[type="checkbox"]:checked + .xethio-switch-ui::before{
  transform: translateX(20px); /* move knob right */
  background: #ffffff; /* knob color (ON) */
}

/* Hide radio storage inputs (still in DOM for existing JS save logic) */
#sms-post-verify .xethio-show-radios{
  display: none; /* hidden */
}

/* ========================= */
/* SAVE BUTTON (FULL WIDTH)  */
/* ========================= */

#sms-post-verify .xethio-pref-sheet .xethio-save-full{
  width: 100% !important; /* full width */
  display: block !important; /* block button */
  margin-top: 12px; /* space above */
  border-radius: 14px !important; /* modern corners */
  padding: 12px 14px !important; /* comfortable tap */
  font-size: 15px; /* clear */
  font-weight: 700; /* emphasis */
}

/* Save message (existing element; styled like a subtle toast) */
#sms-post-verify .xethio-pref-sheet .xethio-attrs-msg{
  display: none; /* hidden in idle state */
  margin-top: 10px; /* spacing under Save button */
  font-size: 13px; /* small status text */
  line-height: 1.2; /* compact line height */
  color: rgba(79,42,110,0.85); /* theme purple */
  min-height: 18px; /* avoid layout jump */
  align-items: center; /* vertical centering */
  gap: 8px; /* space between spinner and text */
}

#sms-post-verify .xethio-pref-sheet .xethio-attrs-msg.is-active{
  display: flex; /* show the single status line */
}

#sms-post-verify .xethio-pref-sheet .xethio-attrs-msg .xethio-spinner{
  width: 14px; /* spinner size */
  height: 14px; /* spinner size */
  border: 2px solid rgba(106,58,140,0.25); /* spinner ring */
  border-top-color: #6a3a8c; /* spinner accent */
  border-radius: 50%; /* circular spinner */
  animation: xethioSpin 0.9s linear infinite; /* rotation */
  flex: 0 0 14px; /* fixed size */
}

@keyframes xethioSpin{
  from{ transform: rotate(0deg); /* start angle */ }
  to{ transform: rotate(360deg); /* end angle */ }
}

@keyframes xethioEyeSwap{
  from{ opacity: 0; /* start transparent */ transform: scale(0.96); /* slight shrink */ }
  to{ opacity: 1; /* fully visible */ transform: scale(1); /* normal size */ }
}

/* ============================== */
/* XETHIO: HIDE STATE + EYE ICON  */
/* ============================== */

#sms-post-verify .xethio-pref-preview.is-hidden .xethio-pref-preview-row{
  filter: blur(0.5px); /* subtler blur so number stays clearly readable */
}

#sms-post-verify .xethio-switch .xethio-toggle-eye{
  display: inline-flex; /* icon box */
  align-items: center; /* vertical center */
  justify-content: center; /* horizontal center */
  width: 24px; /* consistent size */
  height: 24px; /* consistent size */
  margin-left: 10px; /* spacing from toggle */
  color: #7a4d9e; /* theme purple */
  pointer-events: none; /* keep label click behavior */
  flex: 0 0 auto; /* prevent stretching */
  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out; /* smooth icon feel */
}

#sms-post-verify .xethio-switch .xethio-toggle-eye .xethio-eye-svg{
  width: 20px; /* icon size */
  height: 20px; /* icon size */
  display: block; /* remove inline gap */
  animation: xethioEyeSwap 200ms ease-in-out; /* soft swap when SVG updates */
}

/* ============================== */
/* XETHIO: SAVE BUTTON ALIGNMENT  */
/* ============================== */

#sms-post-verify .xethio-pref-sheet .xethio-save-full{
  display: flex !important; /* perfect centering */
  align-items: center; /* vertical center */
  justify-content: center; /* horizontal center */
  font-family: inherit !important; /* match theme font exactly */
  line-height: 1 !important; /* remove baseline drift */
}

/* Xethio Contact Preferences — Preview separator + in-card toggle + discard modal (UI-only) */

#sms-post-verify .xethio-preview-sep{
  width: 100%; /* full-width separator */
  height: 1px; /* thin line */
  background: rgba(0,0,0,0.08); /* subtle divider */
  margin: 10px 0 8px 0; /* spacing inside preview card */
}

#sms-post-verify .xethio-show-toggle-row--inside{
  padding: 0; /* no extra padding inside card */
  margin: 0; /* reset margin */
}

#sms-post-verify .xethio-save-full:disabled{
  opacity: 0.55; /* disabled look */
  cursor: not-allowed; /* disabled cursor */
  pointer-events: none; /* prevent clicks */
}

#sms-post-verify .xethio-pref-preview.is-hidden .xethio-pref-preview-caption{
  font-size: 14px; /* +1px emphasis when hidden */
  font-weight: 600; /* stronger hidden-state label */
}

/* Discard confirmation modal (UI-only) */
#sms-post-verify .xethio-discard-modal{
  position: absolute; /* sit on top of the bottom sheet overlay */
  inset: 0; /* cover the overlay */
  display: none; /* hidden by default */
  align-items: center; /* center dialog vertically */
  justify-content: center; /* center dialog horizontally */
  padding: 18px; /* safe spacing on small screens */
  z-index: 1105; /* above sheet contents */
}

#sms-post-verify .xethio-discard-modal.is-open{
  display: flex; /* show modal */
}

#sms-post-verify .xethio-discard-backdrop{
  position: absolute; /* cover modal area */
  inset: 0; /* full cover */
  background: rgba(0, 0, 0, 0.45); /* dim backdrop */
}

#sms-post-verify .xethio-discard-dialog{
  position: relative; /* above backdrop */
  width: 100%; /* responsive width */
  max-width: 380px; /* readable max size */
  background: #ffffff; /* dialog surface */
  border-radius: 16px; /* soft rounded corners */
  padding: 18px; /* inner spacing */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); /* soft elevation */
}

#sms-post-verify .xethio-discard-title{
  margin: 0 0 10px 0; /* slightly more breathing room under title */
  font-size: 18px; /* modal title size */
  font-weight: 700; /* title emphasis */
  color: #6a3a8c; /* theme purple */
}

#sms-post-verify .xethio-discard-desc{
  margin: 0 0 14px 0; /* description spacing */
  font-size: 14px; /* description size */
  line-height: 1.35; /* readable line height */
  color: #666666; /* neutral text */
}

#sms-post-verify .xethio-discard-actions{
  display: flex; /* horizontal buttons */
  gap: 10px; /* button spacing */
  justify-content: flex-end; /* align to the right */
}

#sms-post-verify .xethio-discard-actions .btn{
  min-width: 110px; /* consistent button width */
}

#sms-post-verify .xethio-discard-actions .xethio-discard-keep{
  box-shadow: 0 8px 18px rgba(106,58,140,0.22); /* slight theme-consistent shadow */
}

#sms-post-verify .xethio-discard-actions .xethio-btn-outline{
  background: #ffffff; /* white background (non-destructive) */
  border: 2px solid #6a3a8c; /* purple outline */
  color: #6a3a8c; /* purple text */
  box-shadow: none; /* keep secondary flatter than primary */
  box-sizing: border-box; /* prevent border from changing button size */
}

/* ========================================================================== */
/* XETHIO - Post-verification polish (UI only)                                 */
/* Scope: ONLY #sms-post-verify                                                */
/* ========================================================================== */

#sms-post-verify .xethio-verify-desc{
  font-size: 13.5px !important; /* calm size */
  line-height: 1.35 !important; /* readable */
  color: rgba(79,42,110,0.78) !important; /* muted purple */
}

#sms-post-verify .xethio-verify-ok-lead{
  font-weight: 600 !important; /* slight emphasis */
  color: rgba(46,125,50,0.95) !important; /* calm success green */
}

#sms-post-verify .xethio-verify-ok-tail{
  font-weight: 500 !important; /* normal weight */
  color: rgba(46,125,50,0.95) !important; /* match success green (keep entire line green) */
  margin-left: 2px !important; /* tiny separation */
}

/* Reassurance line (only before verification) */
#sms-post-verify .xethio-phone-reassure{
  margin-top: 8px !important; /* space below phone field */
  margin-bottom: 10px !important; /* space before Contact preferences */
  font-size: 12.5px !important; /* small helper */
  line-height: 1.35 !important; /* readable */
  color: rgba(79,42,110,0.68) !important; /* muted reassurance */
  padding-left: 4px !important; /* align with input content */
}

#sms-post-verify[data-verified="1"] .xethio-phone-reassure{
  display: none !important; /* remove once verified */
}

/* Prevent overlap when helper text is present */
#sms-post-verify[data-verified="0"] .xethio-pref-trigger{
  margin-top: 0px !important; /* cancel the negative pull-up */
}

/* Status line polish */
#sms-post-verify .sms-status-line{
  margin-top: 6px !important; /* tighter spacing directly under phone field */
  display: flex !important; /* align label + value */
  align-items: center !important; /* vertical align */
  gap: 6px !important; /* spacing */
  font-size: 13.5px !important; /* consistent sizing */
  line-height: 1.2 !important; /* compact */
  color: rgba(79,42,110,0.72) !important; /* neutral label */
}

#sms-post-verify .sms-status-text{
  display: inline-flex !important; /* icon + text row */
  align-items: center !important; /* vertical align */
  gap: 6px !important; /* icon spacing */
  font-weight: 600 !important; /* stronger */
}

#sms-post-verify .sms-status-text.is-verified{
  color: rgba(46,125,50,0.95) !important; /* success */
}

#sms-post-verify .sms-status-text.is-unverified{
  color: rgba(171,62,62,0.88) !important; /* muted red accent (not alarm-red) */
}

#sms-post-verify .sms-status-text.is-notset{
  color: rgba(79,42,110,0.55) !important; /* softer */
  font-weight: 500 !important; /* less emphasis */
}

#sms-post-verify .sms-status-icon{
  width: 14px !important; /* icon width */
  height: 14px !important; /* icon height */
  display: inline-flex !important; /* box */
  align-items: center !important; /* center */
  justify-content: center !important; /* center */
  flex: 0 0 14px !important; /* fixed size */
}

#sms-post-verify .sms-status-icon svg{
  width: 14px !important; /* svg size */
  height: 14px !important; /* svg size */
  display: block !important; /* remove inline gap */
}

/* Phone row (input + Edit button) */
#sms-post-verify .xethio-phone-row{
  display: flex !important; /* keep phone input + Edit on one row */
  align-items: center !important; /* vertical alignment */
  gap: 10px !important; /* spacing between input and Edit */
}

#sms-post-verify .xethio-phone-row .input-box{
  flex: 1 1 auto !important; /* let input grow */
  margin: 0 !important; /* prevent extra outer spacing */
}

#sms-post-verify .xethio-phone-row .sms-edit-phone{
  flex: 0 0 auto !important; /* prevent shrinking */
  white-space: nowrap !important; /* keep “Edit” on one line */
}

/* Pre-verification spacing: helper text -> Send code */
#sms-post-verify .sms-send-code{
  margin-top: 8px !important; /* small breathing room above Send code */
}

/* Android-only typography polish (keep iPhone unchanged) */
html.xethio-android #sms-post-verify .xethio-phone-reassure{
  font-size: 11.8px !important; /* slightly smaller helper text (Android only) */
  line-height: 1.35 !important; /* readable at smaller size */
}

html.xethio-android #sms-post-verify .xethio-pref-helperline{
  font-size: 11.8px !important; /* slightly smaller unlock text (Android only) */
  line-height: 1.35 !important; /* readable at smaller size */
}

html.xethio-android #sms-post-verify .xethio-pref-trigger{
  font-size: 12.5px !important; /* slightly smaller Contact preferences label (Android only) */
}

html.xethio-android #sms-post-verify .xethio-verify-ok,
html.xethio-android #sms-post-verify .xethio-verify-ok-tail{
  font-size: 12.8px !important; /* helps keep success line on one row on Android */
  line-height: 1.3 !important; /* compact without clipping */
}

/* One-time highlight on Contact preferences after verification succeeds */
@keyframes xethioPrefOneShot{
  0%{
    transform: scale(1); /* start scale */
    box-shadow: 0 0 0 0 rgba(122,77,158,0); /* no glow */
  }
  45%{
    transform: scale(1.03); /* subtle pulse */
    box-shadow: 0 0 0 4px rgba(122,77,158,0.18), 0 8px 18px rgba(122,77,158,0.20); /* soft glow */
  }
  100%{
    transform: scale(1); /* return */
    box-shadow: 0 0 0 0 rgba(122,77,158,0); /* glow off */
  }
}

#sms-post-verify .xethio-pref-trigger.xethio-pref-highlight{
  animation: xethioPrefOneShot 1.2s ease-out 1; /* one-time animation */
  will-change: transform, box-shadow; /* smoother motion */
}