.aiweb-login-page .aiweb-bottomnav {
display: none;
}
.aiweb-login-page .entry-title {
display: none;
}
body.aiweb-login-page {
background-color: var(--surface);
}
.aiweb-login-page .aiweb-main,
.aiweb-login-page .aiweb-container,
.aiweb-login-page .entry-content {
padding: 0;
margin: 0;
}
.aiweb-auth {
--aiweb-auth-mascot-w: calc(var(--space-16) * 3);   
--aiweb-auth-mascot-h: calc(var(--space-16) * 2);   
--aiweb-auth-mascot-overlap: var(--space-6);        
max-inline-size: var(--app-max);
margin-inline: auto;
padding-inline: var(--space-4);
padding-block: var(--space-10) var(--space-8);
}
.aiweb-auth__card {
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
padding: var(--space-6);
}
.aiweb-auth__mascot {
position: relative;
z-index: 0;
display: flex;
justify-content: center;
align-items: flex-end;
block-size: var(--aiweb-auth-mascot-h);
}
.aiweb-auth__mascot-img {
display: block;
block-size: var(--aiweb-auth-mascot-h);
inline-size: auto;
max-inline-size: 100%;
object-fit: contain;
}
.aiweb-auth__mascot-ph {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
inline-size: var(--aiweb-auth-mascot-w);
block-size: var(--aiweb-auth-mascot-h);
border: 1px dashed var(--border);
border-radius: var(--radius-lg);
background-color: var(--background);
color: var(--text-muted);
}
.aiweb-auth__mascot-label {
font-size: var(--fs-caption);
line-height: var(--lh-caption);
}
.aiweb-auth__mascot + .aiweb-auth__card {
position: relative;
z-index: 1;
margin-block-start: calc(var(--aiweb-auth-mascot-overlap) * -1);
}
.aiweb-auth__top {
display: flex;
justify-content: flex-end; 
}
.aiweb-auth__back {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding-block: var(--space-2);
padding-inline: var(--space-4);
border-radius: var(--radius-pill);
background-color: var(--background);
color: var(--text-secondary);
font-size: var(--fs-body);
font-weight: var(--fw-medium);
text-decoration: none;
transition: background-color .15s ease, color .15s ease;
}
.aiweb-auth__back:hover {
background-color: var(--border);
color: var(--text-primary);
}
.aiweb-auth__back .aiweb-icon {
color: var(--text-muted);
}
.aiweb-auth__head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
margin-block-start: var(--space-4);
margin-block-end: var(--space-6);
text-align: center;
}
.aiweb-auth__avatar {
display: inline-flex;
color: var(--color-primary);
}
.aiweb-auth__title {
margin: 0;
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
line-height: var(--lh-h2);
color: var(--text-primary);
}
.aiweb-auth__tabs {
display: flex;
gap: var(--space-1);
padding: var(--space-1);
border-radius: var(--radius-pill);
background-color: var(--background);
}
.aiweb-auth__tab {
flex: 1 1 0;
min-inline-size: 0;
padding-block: var(--space-3);
padding-inline: var(--space-2);
border: 0;
border-radius: var(--radius-pill);
background-color: transparent;
color: var(--text-secondary);
font-family: inherit;
font-size: var(--fs-body);
font-weight: var(--fw-medium);
cursor: pointer;
transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.aiweb-auth__tab.is-active {
background-color: var(--surface);
color: var(--color-primary);
font-weight: var(--fw-semibold);
box-shadow: var(--shadow-card);
}
.aiweb-auth__panel {
margin-block-start: var(--space-6);
}
.aiweb-auth .woocommerce-NoticeGroup,
.aiweb-auth .woocommerce-error,
.aiweb-auth .woocommerce-info,
.aiweb-auth .woocommerce-message {
margin: var(--space-4) 0 0;
padding: var(--space-4);
list-style: none;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background-color: var(--background);
color: var(--text-primary);
font-size: var(--fs-body);
}
.aiweb-auth .woocommerce-error {
border-color: var(--color-discount);
color: var(--color-discount);
}
.aiweb-auth .woocommerce-error li,
.aiweb-auth .woocommerce-info li,
.aiweb-auth .woocommerce-message li {
margin: 0;
list-style: none;
}
.aiweb-field {
margin-block-end: var(--space-5);
}
.aiweb-field:last-child {
margin-block-end: 0;
}
.aiweb-field__label {
display: block;
margin-block-end: var(--space-2);
font-size: var(--fs-body);
font-weight: var(--fw-medium);
color: var(--text-secondary);
text-align: start;
}
.aiweb-field__control {
position: relative;
}
.aiweb-field__icon {
position: absolute;
inset-inline-end: var(--space-4);
inset-block: 0;
display: inline-flex;
align-items: center;
color: var(--text-muted);
pointer-events: none;
}
.aiweb-field__input {
inline-size: 100%;
min-block-size: 56px;
padding-block: var(--space-3);
padding-inline-start: var(--space-4);
padding-inline-end: var(--space-12); 
border: 1px solid var(--border);
border-radius: var(--radius-md);
background-color: var(--background);
color: var(--text-primary);
font-family: inherit;
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.aiweb-field__input[dir="ltr"] {
padding-inline-start: var(--space-12);
padding-inline-end: var(--space-4);
}
.aiweb-field__input::placeholder {
color: var(--text-muted);
}
.aiweb-field__input:focus {
outline: none;
border-color: var(--color-primary);
background-color: var(--surface);
}
.aiweb-auth__submit.aiweb-btn {
inline-size: 100%;
border-radius: var(--radius-md);
margin-block-start: var(--space-5);
}
.aiweb-auth__terms {
margin-block-start: var(--space-4);
margin-block-end: 0;
font-size: var(--fs-caption);
line-height: var(--lh-caption);
color: var(--text-muted);
text-align: center;
}
.aiweb-auth__remember {
display: flex;
align-items: center;
gap: var(--space-2);
margin-block-start: var(--space-4);
font-size: var(--fs-body);
color: var(--text-secondary);
cursor: pointer;
}
.aiweb-auth__remember-input {
inline-size: var(--space-5);
block-size: var(--space-5);
accent-color: var(--color-primary);
}
.aiweb-auth__switch {
margin-block-start: var(--space-5);
margin-block-end: 0;
text-align: center;
}
.aiweb-auth__lost {
margin-block-start: var(--space-3);
margin-block-end: 0;
text-align: center;
}
.aiweb-auth__link {
padding: 0;
border: 0;
background: none;
color: var(--color-primary);
font-family: inherit;
font-size: var(--fs-body);
text-decoration: none;
cursor: pointer;
}
.aiweb-auth__link:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.aiweb-auth__link--strong {
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
}
.aiweb-auth__lost .aiweb-auth__link {
color: var(--text-secondary);
font-size: var(--fs-caption);
}
.aiweb-auth__hint {
margin-block-start: 0;
margin-block-end: var(--space-4);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-secondary);
text-align: start;
}
.aiweb-auth--simple .aiweb-auth__form {
margin-block-start: var(--space-4);
}
.aiweb-account-page .aiweb-bottomnav,
.aiweb-account-page .entry-title {
display: none;
}
.aiweb-account-page .aiweb-main {
padding: 0;
}
body.aiweb-account-page:not(.aiweb-login-page) {
background-color: var(--background);
}
.aiweb-account {
max-inline-size: var(--app-max);
margin-inline: auto;
padding-inline: var(--space-4);
padding-block: var(--space-4) var(--space-10);
}
.aiweb-account__bar {
display: flex;
align-items: center;
gap: var(--space-3);
padding-block: var(--space-2) var(--space-4);
}
.aiweb-account__fab {
position: fixed;
inset-block-end: calc(var(--aiweb-acfab-bottom, var(--space-6)) + env(safe-area-inset-bottom, 0px));
inset-inline-end: var(--space-4); 
z-index: var(--z-bottomnav);
display: grid;
place-items: center;
inline-size: calc(var(--space-12) + var(--space-2)); 
block-size: calc(var(--space-12) + var(--space-2));
padding: 0;
border: 0;
border-radius: var(--radius-pill);
background-color: var(--aiweb-acfab-bg, var(--color-primary));
color: var(--aiweb-acfab-fg, var(--text-on-primary));
box-shadow: var(--shadow-floating);
cursor: pointer;
transition: background-color var(--transition-base), transform var(--transition-base);
}
.aiweb-account__fab:hover {
background-color: var(--aiweb-acfab-hover, var(--color-primary-dark));
}
.aiweb-account__fab:active {
transform: scale(0.96);
}
.aiweb-account__fab--right {
inset-inline-end: auto;
inset-inline-start: var(--space-4);
}
.aiweb-account__fab .aiweb-icon,
.aiweb-account__fab-icon-img {
position: relative;
z-index: 1;
}
.aiweb-account__fab-icon-img {
display: block;
inline-size: var(--space-6);
block-size: var(--space-6);
object-fit: contain;
}
.aiweb-account__fab::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
background-color: var(--aiweb-acfab-bg, var(--color-primary));
animation: aiweb-fab-pulse 2.6s ease-out infinite;
}
@keyframes aiweb-fab-pulse {
0% {
transform: scale(1);
opacity: 0.35;
}
70% {
transform: scale(1.45);
opacity: 0;
}
100% {
transform: scale(1.45);
opacity: 0;
}
}
.aiweb-account__fab--anim-none::before,
.aiweb-account__fab--anim-bounce::before,
.aiweb-account__fab--anim-wobble::before {
animation: none;
opacity: 0;
}
.aiweb-account__fab--anim-bounce {
animation: aiweb-fab-bounce 3.2s ease-in-out infinite;
}
.aiweb-account__fab--anim-wobble {
animation: aiweb-fab-wobble 3.2s ease-in-out infinite;
}
@keyframes aiweb-fab-bounce {
0%,
22%,
36%,
100% {
transform: translateY(0);
}
10% {
transform: translateY(calc(-1 * var(--space-2)));
}
29% {
transform: translateY(calc(-1 * var(--space-1)));
}
}
@keyframes aiweb-fab-wobble {
0%,
20%,
100% {
transform: rotate(0deg);
}
4% {
transform: rotate(10deg);
}
9% {
transform: rotate(-8deg);
}
14% {
transform: rotate(5deg);
}
18% {
transform: rotate(-2deg);
}
}
@media (prefers-reduced-motion: reduce) {
.aiweb-account__fab,
.aiweb-account__fab::before {
animation: none;
}
}
.aiweb-account__title {
flex: 1 1 auto;
min-inline-size: 0;
margin: 0;
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-dash {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.aiweb-dash__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
}
.aiweb-dash-card {
display: flex;
flex-direction: column;
gap: var(--space-4);
min-block-size: 128px;
padding: var(--space-5);
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-dash-card__top {
display: flex;
align-items: center;
gap: var(--space-3);
}
.aiweb-dash-card__icon {
flex: 0 0 auto;
display: grid;
place-items: center;
inline-size: var(--space-12); 
block-size: var(--space-12);
border-radius: var(--radius-md);
}
.aiweb-dash-card__icon--completed {
background-color: var(--color-success-soft);
color: var(--color-success);
}
.aiweb-dash-card__icon--cancelled {
background-color: var(--color-danger-soft);
color: var(--color-discount);
}
.aiweb-dash-card__icon--returned {
background-color: var(--color-notice-bg);
color: var(--color-notice-icon);
}
.aiweb-dash-card__icon--wallet {
background-color: transparent;
color: var(--color-primary);
}
.aiweb-dash-card__title {
flex: 1 1 auto;
min-inline-size: 0;
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
color: var(--text-primary);
text-align: start;
}
.aiweb-dash-card__value {
display: flex;
align-items: baseline;
gap: var(--space-1);
margin-block-start: auto;
}
.aiweb-dash-card__count {
font-size: var(--fs-h2);
line-height: 1;
font-weight: var(--fw-bold);
color: var(--color-primary);
}
.aiweb-dash-card__unit {
font-size: var(--fs-caption);
color: var(--text-secondary);
}
.aiweb-dash-card__skeleton {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-block-start: auto;
}
.aiweb-dash-card__sk-pill {
inline-size: 60%;
block-size: var(--space-6);
border-radius: var(--radius-pill);
background-color: var(--border);
}
.aiweb-dash-card__sk-line {
inline-size: 40%;
block-size: var(--space-2);
border-radius: var(--radius-pill);
background-color: var(--border);
}
.aiweb-dash__boxes {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
min-inline-size: 0; 
}
.aiweb-dash-box {
display: flex;
flex-direction: column;
gap: var(--space-3);
min-block-size: 88px;
padding: var(--space-4) var(--space-5);
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-dash-box__head {
display: flex;
align-items: center;
gap: var(--space-2);
}
.aiweb-dash-box__icon {
flex: 0 0 auto;
display: inline-flex;
color: var(--color-primary);
}
.aiweb-dash-box__title {
margin: 0;
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
color: var(--text-primary);
text-align: start;
}
.aiweb-dash-box__text {
margin: 0;
font-size: var(--fs-body);
color: var(--text-secondary);
}
.aiweb-dash-box--calendar {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.aiweb-dash-box__main {
display: flex;
flex-direction: column;
gap: var(--space-3);
min-inline-size: 0;
}
.aiweb-dash-box__cal {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.aiweb-dash-box__day {
flex: 0 0 auto;
padding-inline: var(--space-2);
font-size: calc(var(--fs-h1) * 2); 
line-height: 1;
font-weight: var(--fw-bold);
color: var(--color-primary);
opacity: .2;
}
.aiweb-dash-box__date {
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-dash-box__weekday {
font-size: var(--fs-body);
color: var(--text-secondary);
}
.aiweb-dash-products {
display: flex;
flex-direction: column;
gap: var(--space-4);
min-inline-size: 0; 
margin-block-start: var(--space-4); 
}
.aiweb-dash-products::before {
content: "";
align-self: center;
inline-size: var(--space-16); 
block-size: 2px;
border-radius: var(--radius-pill);
background-color: var(--border);
}
.aiweb-dash-products .aiweb-section-header__title {
font-size: var(--fs-body-lg);
line-height: var(--lh-body);
}
.aiweb-dash-products__grid,
.aiweb-wishlist__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
.aiweb-sheet--drawer {
align-items: stretch;        
justify-content: flex-start; 
}
.aiweb-sheet__panel--drawer {
inline-size: calc(var(--space-16) + var(--space-6)); 
max-inline-size: 86vw;
block-size: 100%;
max-block-size: 100%;
border-radius: 0;
box-shadow: var(--shadow-nav);
animation: aiweb-drawer-in .28s cubic-bezier(.4, 0, .2, 1) both;
transition: inline-size .28s cubic-bezier(.4, 0, .2, 1);
}
.aiweb-sheet__panel--drawer:has(.aiweb-accountnav.is-nav-expanded) {
inline-size: 300px;
}
.aiweb-sheet__panel--drawer .aiweb-sheet__handle {
display: none;
}
.aiweb-sheet--drawer .aiweb-sheet__body {
padding-inline: var(--space-3);
}
@keyframes aiweb-drawer-in {
from { transform: translateX(100%); }
to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.aiweb-sheet__panel--drawer {
animation: none;
transition: none;
}
.aiweb-accountnav__toggle .aiweb-icon {
transition: none;
}
}
.aiweb-accountnav__toggle {
position: absolute;
inset-block-start: calc(var(--space-16) + var(--space-10)); 
inset-inline-end: calc(var(--space-6) * -1); 
z-index: 2;
display: grid;
place-items: center;
inline-size: calc(var(--space-10) + var(--space-1)); 
block-size: calc(var(--space-10) + var(--space-1));
padding: 0;
border: 0;
border-radius: var(--radius-pill);
background-color: var(--color-primary);
color: var(--text-on-primary);
box-shadow: var(--shadow-floating);
cursor: pointer;
transition: background-color .15s ease, transform .15s ease;
}
.aiweb-accountnav__toggle:hover {
background-color: var(--color-primary-dark);
}
.aiweb-accountnav__toggle:active {
transform: scale(0.94);
}
.aiweb-accountnav__toggle .aiweb-icon {
transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.aiweb-accountnav.is-nav-expanded .aiweb-accountnav__toggle .aiweb-icon {
transform: rotate(180deg);
}
.aiweb-sheet--drawer .aiweb-accountnav:not(.is-nav-expanded) .aiweb-accountnav__head {
justify-content: center;
padding-inline: 0;
}
.aiweb-sheet--drawer .aiweb-accountnav:not(.is-nav-expanded) .aiweb-accountnav__id {
display: none;
}
.aiweb-sheet--drawer .aiweb-accountnav:not(.is-nav-expanded) .aiweb-accountnav__item {
justify-content: center;
gap: 0;
padding-inline: 0;
min-block-size: var(--space-12); 
}
.aiweb-sheet--drawer .aiweb-accountnav:not(.is-nav-expanded) .aiweb-accountnav__label {
position: absolute;
inline-size: 1px;
block-size: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.aiweb-accountnav {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.aiweb-accountnav__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding-inline: var(--space-3);
padding-block: var(--space-2) var(--space-5);
margin-block-end: var(--space-3);
border-block-end: 1px solid var(--border);
}
.aiweb-accountnav__profile {
display: flex;
align-items: center;
gap: var(--space-3);
min-inline-size: 0;
}
.aiweb-accountnav__avatar {
flex: 0 0 auto;
display: inline-flex;
}
.aiweb-accountnav__avatar-img {
inline-size: 44px; 
block-size: 44px;
border-radius: var(--radius-pill);
object-fit: cover;
}
.aiweb-accountnav__id {
display: flex;
flex-direction: column;
min-inline-size: 0;
text-align: start;
}
.aiweb-accountnav__name {
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-accountnav__role {
font-size: var(--fs-caption);
color: var(--text-muted);
}
.aiweb-accountnav__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.aiweb-accountnav__item {
display: flex;
align-items: center;
gap: var(--space-4);
padding-block: var(--space-3);
padding-inline: var(--space-3);
border-radius: var(--radius-md);
text-decoration: none;
color: var(--text-primary);
font-size: var(--fs-body-lg);
font-weight: var(--fw-medium);
transition: background-color .15s ease;
}
.aiweb-accountnav__item:hover {
background-color: var(--background);
}
.aiweb-accountnav__item.is-active {
background-color: var(--background);
font-weight: var(--fw-semibold);
}
.aiweb-accountnav__icon {
flex: 0 0 auto;
display: inline-flex;
color: var(--color-primary);
}
.aiweb-accountnav__pic {
inline-size: var(--space-6); 
block-size: var(--space-6);
border-radius: var(--radius-pill);
object-fit: cover;
}
.aiweb-accountnav__label {
min-inline-size: 0;
}
.aiweb-accountnav__item--danger {
color: var(--color-discount);
}
.aiweb-accountnav__item--danger .aiweb-accountnav__icon {
color: var(--color-discount);
}
.aiweb-order-badge {
display: inline-flex;
align-items: center;
padding-block: var(--space-1);
padding-inline: var(--space-3);
border-radius: var(--radius-pill);
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
white-space: nowrap;
}
.aiweb-order-badge--success {
background-color: var(--color-success-soft);
color: var(--color-success);
}
.aiweb-order-badge--primary {
background-color: var(--color-primary-soft);
color: var(--color-primary-fg);
}
.aiweb-order-badge--notice {
background-color: var(--color-notice-bg);
color: var(--color-notice-icon);
}
.aiweb-order-badge--danger {
background-color: var(--color-danger-soft);
color: var(--color-discount);
}
.aiweb-order-badge--neutral {
background-color: var(--background);
color: var(--text-secondary);
}
.aiweb-orders {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.aiweb-order-card {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-5);
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-order-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.aiweb-order-card__num {
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
color: var(--text-primary);
text-decoration: none;
}
.aiweb-order-card__num:hover {
color: var(--color-primary);
}
.aiweb-order-card__meta {
display: flex;
align-items: center;
gap: var(--space-4);
font-size: var(--fs-caption);
color: var(--text-secondary);
}
.aiweb-order-card__date {
display: inline-flex;
align-items: center;
gap: var(--space-1);
}
.aiweb-order-card__date .aiweb-icon {
color: var(--text-muted);
}
.aiweb-order-card__thumbs {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.aiweb-order-card__thumb {
flex: 0 0 auto;
inline-size: var(--space-12); 
block-size: var(--space-12);
border-radius: var(--radius-sm);
overflow: hidden;
background-color: var(--background);
border: 1px solid var(--border);
}
.aiweb-order-card__thumb img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
display: block;
}
.aiweb-order-card__more {
flex: 0 0 auto;
display: inline-grid;
place-items: center;
inline-size: var(--space-12); 
block-size: var(--space-12);
border-radius: var(--radius-sm);
background-color: var(--background);
color: var(--text-secondary);
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
}
.aiweb-order-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding-block-start: var(--space-4);
border-block-start: 1px solid var(--border);
}
.aiweb-order-card__total {
display: flex;
align-items: baseline;
gap: var(--space-2);
min-inline-size: 0;
}
.aiweb-order-card__total-label {
font-size: var(--fs-caption);
color: var(--text-secondary);
}
.aiweb-order-card__actions {
display: flex;
gap: var(--space-2);
}
.aiweb-order-card__actions .aiweb-btn {
flex: 1 1 0;
min-inline-size: 0;
border-radius: var(--radius-md);
}
.aiweb-order-card__btn--outline.aiweb-btn {
border: 1px solid var(--border);
background-color: var(--surface);
color: var(--text-primary);
}
.aiweb-order-card__btn--outline.aiweb-btn:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.aiweb-orders-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-3);
padding: var(--space-10) var(--space-5);
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-orders-empty[hidden] {
display: none;
}
.aiweb-orders-empty__icon {
display: grid;
place-items: center;
inline-size: var(--space-16); 
block-size: var(--space-16);
margin-block-end: var(--space-2);
border-radius: var(--radius-pill);
background-color: var(--background);
color: var(--text-muted);
}
.aiweb-orders-empty__title {
margin: 0;
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-orders-empty__text {
margin: 0;
font-size: var(--fs-body);
color: var(--text-secondary);
}
.aiweb-orders-empty__btn.aiweb-btn {
inline-size: 100%;
margin-block-start: var(--space-4);
border-radius: var(--radius-md);
}
.aiweb-orders-pagination {
display: flex;
align-items: center;
gap: var(--space-3);
margin-block-start: var(--space-5);
}
.aiweb-orders-pagination__link {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding-block: var(--space-2);
padding-inline: var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
background-color: var(--surface);
color: var(--text-primary);
font-size: var(--fs-body);
font-weight: var(--fw-medium);
text-decoration: none;
transition: border-color .15s ease, color .15s ease;
}
.aiweb-orders-pagination__link:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.aiweb-orders-pagination__link .aiweb-icon {
color: var(--text-muted);
}
.aiweb-orders-pagination__link--next {
margin-inline-start: auto;
}
.aiweb-vieworder {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.aiweb-vieworder__head {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-block-end: var(--space-2);
}
.aiweb-vieworder__idrow {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.aiweb-vieworder__num {
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-vieworder__date {
display: inline-flex;
align-items: center;
gap: var(--space-1);
margin: 0;
font-size: var(--fs-caption);
color: var(--text-secondary);
}
.aiweb-vieworder__date .aiweb-icon {
color: var(--text-muted);
}
.aiweb-vieworder__notes {
padding: var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background-color: var(--surface);
}
.aiweb-vieworder__notes-title {
margin: 0 0 var(--space-3);
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-vieworder__notelist {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.aiweb-vieworder__note-date {
margin: 0 0 var(--space-1);
font-size: var(--fs-caption);
color: var(--text-muted);
}
.aiweb-vieworder__note-text {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-primary);
}
.aiweb-vieworder__note-text p {
margin: 0;
}
.aiweb-vieworder__actions {
margin-block-start: var(--space-2);
}
.aiweb-vieworder__pay.aiweb-btn {
inline-size: 100%;
border-radius: var(--radius-md);
}
.aiweb-oc-details {
padding: var(--space-5);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background-color: var(--surface);
}
.aiweb-oc-details__title {
margin: 0 0 var(--space-5);
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-oc-block {
padding: var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background-color: var(--surface);
}
.aiweb-oc-block + .aiweb-oc-block {
margin-block-start: var(--space-4);
}
.aiweb-oc-block__title {
margin: 0 0 var(--space-4);
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-oc-info {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin: 0;
}
.aiweb-oc-info__row {
display: flex;
gap: var(--space-2);
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.aiweb-oc-info__row--gap {
margin-block-start: var(--space-2);
}
.aiweb-oc-info__key {
flex: none;
margin: 0;
color: var(--text-secondary);
}
.aiweb-oc-info__val {
margin: 0;
min-inline-size: 0;
color: var(--text-primary);
font-weight: var(--fw-medium);
}
.aiweb-oc-address {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-primary);
}
.aiweb-oc-items {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin: 0 0 var(--space-4);
padding: 0;
list-style: none;
}
.aiweb-oc-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
}
.aiweb-oc-item__info {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-inline-size: 0;
}
.aiweb-oc-item__name {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-primary);
}
.aiweb-oc-item__qty {
font-size: var(--fs-caption);
color: var(--text-secondary);
}
.aiweb-oc-item__price {
flex: none;
white-space: nowrap;
}
.aiweb-oc-totals {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding-block-start: var(--space-4);
border-block-start: 1px solid var(--border);
}
.aiweb-oc-totals__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
font-size: var(--fs-body);
}
.aiweb-oc-totals__label {
color: var(--text-secondary);
}
.aiweb-oc-totals__value {
color: var(--text-primary);
font-weight: var(--fw-semibold);
}
.aiweb-oc-totals__row--grand .aiweb-oc-totals__label {
color: var(--text-primary);
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
}
.aiweb-oc-totals__row--grand .aiweb-price__amount {
font-size: var(--fs-h3);
}
.aiweb-account__content .woocommerce-message,
.aiweb-account__content .woocommerce-error,
.aiweb-account__content .woocommerce-info {
margin: 0 0 var(--space-4);
padding: var(--space-4);
list-style: none;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background-color: var(--background);
color: var(--text-primary);
font-size: var(--fs-body);
}
.aiweb-account__content .woocommerce-error {
border-color: var(--color-discount);
color: var(--color-discount);
}
.aiweb-account__content .woocommerce-message {
border-color: var(--color-success);
color: var(--color-success);
}
.aiweb-account__content .woocommerce-message li,
.aiweb-account__content .woocommerce-error li,
.aiweb-account__content .woocommerce-info li {
margin: 0;
list-style: none;
}
.aiweb-editacc {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.aiweb-editacc__card {
padding: var(--space-5);
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-editacc__title {
margin: 0 0 var(--space-5);
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-field-row {
display: flex;
gap: var(--space-4);
margin-block-end: var(--space-5);
}
.aiweb-field-row .aiweb-field {
flex: 1 1 0;
min-inline-size: 0;
margin-block-end: 0;
}
.aiweb-field__hint {
display: block;
margin-block-start: var(--space-2);
font-size: var(--fs-caption);
line-height: var(--lh-caption);
color: var(--text-muted);
}
.aiweb-editacc__actions {
margin: 0;
}
.aiweb-editacc__submit.aiweb-btn {
inline-size: 100%;
border-radius: var(--radius-md);
}
.aiweb-editacc .woocommerce-form-row {
margin-block-end: var(--space-5);
}
.aiweb-editacc .woocommerce-form-row > label {
display: block;
margin-block-end: var(--space-2);
font-size: var(--fs-body);
font-weight: var(--fw-medium);
color: var(--text-secondary);
text-align: start;
}
.aiweb-editacc .woocommerce-form-row .input-text {
inline-size: 100%;
min-block-size: 56px;
padding-block: var(--space-3);
padding-inline: var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background-color: var(--background);
color: var(--text-primary);
font-family: inherit;
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.aiweb-addresses {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.aiweb-addresses__intro {
margin: 0;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-secondary);
}
.aiweb-addresses__grid {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.aiweb-address-card {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-5);
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-address-card__head {
display: flex;
align-items: center;
gap: var(--space-3);
}
.aiweb-address-card__icon {
flex: 0 0 auto;
display: grid;
place-items: center;
inline-size: var(--space-10); 
block-size: var(--space-10);
border-radius: var(--radius-md);
background-color: var(--color-primary-soft);
color: var(--color-primary);
}
.aiweb-address-card__title {
margin: 0;
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-address-card__body {
margin: 0;
font-size: var(--fs-body);
line-height: 1.9;
color: var(--text-primary);
font-style: normal;
}
.aiweb-address-card__empty {
color: var(--text-muted);
}
.aiweb-address-card__edit.aiweb-btn {
inline-size: 100%;
border: 1px solid var(--border);
background-color: var(--surface);
color: var(--text-primary);
border-radius: var(--radius-md);
}
.aiweb-address-card__edit.aiweb-btn:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.aiweb-address-card__edit .aiweb-icon {
color: var(--text-muted);
}
.aiweb-address-card__edit:hover .aiweb-icon {
color: var(--color-primary);
}
.aiweb-editaddr__title {
margin: 0 0 var(--space-5);
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-editaddr__actions {
margin-block-start: var(--space-6);
}
.aiweb-editaddr__submit.aiweb-btn {
inline-size: 100%;
border-radius: var(--radius-md);
}
.aiweb-acc-fields__grid {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
}
.aiweb-acc-fields .form-row {
flex: 1 1 100%;
min-inline-size: 0;
margin: 0;
}
.aiweb-acc-fields .form-row-first,
.aiweb-acc-fields .form-row-last {
flex: 1 1 calc(50% - var(--space-4) / 2);
}
.aiweb-acc-fields .form-row > label {
display: block;
margin-block-end: var(--space-2);
font-size: var(--fs-body);
font-weight: var(--fw-medium);
color: var(--text-secondary);
text-align: start;
}
.aiweb-acc-fields .form-row .required {
color: var(--text-muted);
border: 0;
text-decoration: none;
}
.aiweb-acc-fields .form-row .optional {
color: var(--text-muted);
}
.aiweb-acc-fields .input-text,
.aiweb-acc-fields input[type="text"],
.aiweb-acc-fields input[type="tel"],
.aiweb-acc-fields input[type="email"],
.aiweb-acc-fields input[type="number"],
.aiweb-acc-fields textarea,
.aiweb-acc-fields select {
inline-size: 100%;
min-block-size: 56px;
padding-block: var(--space-3);
padding-inline: var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background-color: var(--background);
color: var(--text-primary);
font-family: inherit;
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.aiweb-acc-fields textarea {
min-block-size: 96px;
resize: vertical;
}
.aiweb-acc-fields .input-text::placeholder,
.aiweb-acc-fields textarea::placeholder {
color: var(--text-muted);
}
.aiweb-acc-fields .input-text:focus,
.aiweb-acc-fields textarea:focus,
.aiweb-acc-fields select:focus {
outline: none;
border-color: var(--color-primary);
background-color: var(--surface);
}
.aiweb-acc-fields .woocommerce-input-wrapper {
display: block;
inline-size: 100%;
}
.aiweb-acc-fields select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236F7687' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left var(--space-4) center;
padding-inline-start: var(--space-10);
}
.aiweb-acc-fields .select2-container {
inline-size: 100% !important; 
}
.aiweb-acc-fields .select2-container .select2-selection--single {
display: flex;
align-items: center;
min-block-size: 56px;
padding-block: var(--space-2);
padding-inline: var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background-color: var(--background);
}
.aiweb-acc-fields .select2-container--default .select2-selection--single .select2-selection__rendered {
padding: 0;
color: var(--text-primary);
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.aiweb-acc-fields .select2-container--default .select2-selection--single .select2-selection__arrow {
inset-block-start: 50%;
transform: translateY(-50%);
}
.aiweb-acc-fields #billing_country_field,
.aiweb-acc-fields #shipping_country_field {
display: none !important;
}
.aiweb-acc-fields .screen-reader-text {
position: absolute;
inline-size: 1px;
block-size: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.aiweb-acc-fields .woocommerce-invalid .input-text,
.aiweb-acc-fields .woocommerce-invalid select,
.aiweb-acc-fields .woocommerce-invalid .select2-selection {
border-color: var(--color-discount);
}
.aiweb-account__sidebar {
display: none;
}
@media (min-width: 1024px) {
.aiweb-account {
max-inline-size: var(--container-max);
padding-block: var(--space-6) var(--space-12);
}
.aiweb-account__bar,
.aiweb-account__fab {
display: none;
}
.aiweb-account__layout {
display: grid;
grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
gap: var(--space-6);
align-items: start;
}
.aiweb-account__sidebar {
display: block;
position: sticky;
inset-block-start: calc(var(--header-h) + var(--space-4));
padding: var(--space-4);
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-dash__grid {
grid-template-columns: repeat(4, minmax(0, 1fr)); 
}
.aiweb-dash__boxes {
grid-template-columns: repeat(2, minmax(0, 1fr)); 
}
.aiweb-dash-products__grid,
.aiweb-wishlist__grid {
grid-template-columns: repeat(4, minmax(0, 1fr)); 
}
.aiweb-orders {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.aiweb-vieworder .aiweb-oc-details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
align-items: start;
}
.aiweb-vieworder .aiweb-oc-details__title {
grid-column: 1 / -1;
margin-block-end: 0;
}
.aiweb-vieworder .aiweb-oc-block + .aiweb-oc-block {
margin-block-start: 0; 
}
.aiweb-addresses__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.aiweb-editacc {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
align-items: start;
}
.aiweb-editacc__actions {
grid-column: 1 / -1;
}
.aiweb-editacc__submit.aiweb-btn {
inline-size: auto;
min-inline-size: 240px;
}
.aiweb-editaddr {
max-inline-size: var(--app-max);
}
.aiweb-auth {
padding-block: var(--space-12);
}
}
.aiweb-otp__step {
display: block;
}
.aiweb-otp__error {
margin-block: var(--space-3) 0;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-discount);
border-radius: var(--radius-md);
color: var(--color-discount);
font-size: var(--fs-body);
line-height: var(--lh-body);
text-align: start;
}
.aiweb-otp__sent {
margin-block: 0 var(--space-5);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-secondary);
text-align: start;
}
.aiweb-otp__number {
display: inline-block;
font-weight: var(--fw-semibold);
color: var(--text-primary);
}
.aiweb-otp__code {
display: flex;
justify-content: center;
gap: var(--space-2);
margin-block-end: var(--space-4);
}
.aiweb-otp__digit {
inline-size: 48px;
min-block-size: 56px;
padding: 0;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background-color: var(--background);
color: var(--text-primary);
font-family: inherit;
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
text-align: center;
}
.aiweb-otp__digit:focus {
outline: none;
border-color: var(--color-primary);
background-color: var(--surface);
}
.aiweb-otp__dev {
margin-block: 0 var(--space-4);
padding: var(--space-2) var(--space-3);
border: 1px dashed var(--color-primary);
border-radius: var(--radius-sm);
background-color: var(--color-primary-soft);
color: var(--color-primary-fg);
font-size: var(--fs-caption);
text-align: center;
}
.aiweb-otp__dev span {
font-weight: var(--fw-bold);
letter-spacing: 2px;
}
.aiweb-otp__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-block-start: var(--space-4);
}
.aiweb-otp__resend-timer {
font-size: var(--fs-caption);
color: var(--text-muted);
}
.aiweb-wallet {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.aiweb-wallet__card {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-6);
border-radius: var(--radius-lg);
background-image: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
box-shadow: var(--shadow-floating);
color: var(--text-on-primary);
}
.aiweb-wallet__balance-box {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.aiweb-wallet__balance-label {
font-size: var(--fs-caption);
color: color-mix(in srgb, var(--text-on-primary) 80%, transparent);
}
.aiweb-wallet__balance {
display: flex;
align-items: baseline;
gap: var(--space-2);
}
.aiweb-wallet__amount {
font-size: var(--fs-h1);
line-height: var(--lh-h1);
font-weight: var(--fw-bold);
color: var(--text-on-primary);
}
.aiweb-wallet__unit {
font-size: var(--fs-body);
color: color-mix(in srgb, var(--text-on-primary) 85%, transparent);
}
.aiweb-wallet__topup {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
border: 0;
border-radius: var(--radius-pill);
background-color: var(--surface);
color: var(--color-primary-fg);
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
cursor: pointer;
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.aiweb-wallet__topup:hover {
box-shadow: var(--shadow-hover);
}
.aiweb-wallet__ledger {
padding: var(--space-5);
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-wallet__ledger-title {
margin-block-end: var(--space-3);
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-wallet__list {
margin: 0;
padding: 0;
list-style: none;
}
.aiweb-wallet-txn {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding-block: var(--space-4);
border-block-end: 1px solid var(--border);
}
.aiweb-wallet-txn:last-child {
border-block-end: 0;
padding-block-end: 0;
}
.aiweb-wallet-txn:first-child {
padding-block-start: 0;
}
.aiweb-wallet-txn__main {
display: flex;
align-items: center;
gap: var(--space-3);
min-inline-size: 0;
}
.aiweb-wallet-txn__badge {
flex: 0 0 auto;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-pill);
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
}
.aiweb-wallet-txn__badge--credit {
background-color: var(--color-success-soft);
color: var(--color-success);
}
.aiweb-wallet-txn__badge--debit {
background-color: var(--color-danger-soft);
color: var(--color-discount);
}
.aiweb-wallet-txn__info {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-inline-size: 0;
}
.aiweb-wallet-txn__desc {
font-size: var(--fs-body);
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.aiweb-wallet-txn__date {
font-size: var(--fs-caption);
color: var(--text-muted);
}
.aiweb-wallet-txn__amount {
flex: 0 0 auto;
display: inline-flex;
align-items: baseline;
gap: var(--space-1);
font-weight: var(--fw-bold);
color: var(--text-primary);
white-space: nowrap;
}
.aiweb-wallet-txn__amount--credit {
color: var(--color-success);
}
.aiweb-wallet-txn__unit {
font-size: var(--fs-caption);
font-weight: var(--fw-regular);
color: var(--text-muted);
}
.aiweb-wallet__empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding-block: var(--space-8);
text-align: center;
}
.aiweb-wallet__empty-icon {
color: var(--text-muted);
}
.aiweb-wallet__empty-text {
max-inline-size: 32ch;
font-size: var(--fs-body);
color: var(--text-secondary);
}
.aiweb-topup {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.aiweb-topup__input {
text-align: start;
letter-spacing: 1px;
}
.aiweb-topup__presets {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.aiweb-topup__preset {
padding: var(--space-2) var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
background-color: var(--surface);
color: var(--text-primary);
font-size: var(--fs-caption);
cursor: pointer;
transition: border-color var(--transition-base), background-color var(--transition-base);
}
.aiweb-topup__preset:hover {
border-color: var(--color-primary);
background-color: var(--color-primary-soft);
color: var(--color-primary-fg);
}
.aiweb-topup__error {
font-size: var(--fs-caption);
color: var(--color-discount);
}
.aiweb-topup__note {
font-size: var(--fs-caption);
color: var(--text-muted);
line-height: var(--lh-body);
}
.aiweb-topup__submit {
margin-block-start: var(--space-2);
}
.aiweb-dash-card--link {
text-decoration: none;
color: inherit;
transition: box-shadow var(--transition-base), transform var(--transition-base);
}
@media (hover: hover) {
.aiweb-dash-card--link:hover {
box-shadow: var(--shadow-hover);
}
}
.aiweb-dash-card__count--balance {
font-size: var(--fs-h3);
overflow-wrap: anywhere;
}
.aiweb-dash-notices__count {
margin-inline-start: auto;
min-inline-size: var(--space-5);
block-size: var(--space-5);
padding-inline: var(--space-1);
display: grid;
place-items: center;
border-radius: var(--radius-pill);
background-color: var(--color-discount);
color: var(--text-on-primary);
font-size: var(--fs-caption);
font-weight: var(--fw-bold);
line-height: 1;
}
.aiweb-dash-notices__list {
list-style: none;
margin: var(--space-3) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.aiweb-notif {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3);
border-radius: var(--radius-md);
color: inherit;
text-decoration: none;
transition: background-color var(--transition-base);
}
a.aiweb-notif:hover {
background-color: var(--background);
}
.aiweb-notif.is-unread {
background-color: var(--color-primary-soft);
}
.aiweb-notif__icon {
flex: 0 0 auto;
display: grid;
place-items: center;
inline-size: var(--space-8);
block-size: var(--space-8);
border-radius: var(--radius-pill);
background-color: var(--surface);
color: var(--color-primary);
}
.aiweb-notif__body {
flex: 1 1 auto;
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.aiweb-notif__text {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-primary);
}
.aiweb-notif__date {
font-size: var(--fs-caption);
color: var(--text-muted);
}
.aiweb-notif__dot {
flex: 0 0 auto;
inline-size: var(--space-2);
block-size: var(--space-2);
margin-block-start: var(--space-1);
border-radius: var(--radius-pill);
background-color: var(--color-discount);
}
.aiweb-dash-notices__readall {
margin-block-start: var(--space-3);
padding: 0;
border: 0;
background: none;
color: var(--color-primary);
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
cursor: pointer;
}
.aiweb-dash-notices__readall:hover {
color: var(--color-primary-fg);
}
.aiweb-dash-notices__viewall {
display: inline-flex;
align-items: center;
gap: var(--space-1);
margin-block-start: var(--space-3);
color: var(--color-primary);
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
text-decoration: none;
}
.aiweb-dash-notices__viewall:hover {
color: var(--color-primary-fg);
}
.aiweb-dash-notices__viewall svg {
inline-size: var(--space-4);
block-size: var(--space-4);
}
.aiweb-notifications {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.aiweb-notifications__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
flex-wrap: wrap;
}
.aiweb-notifications__title {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin: 0;
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-notifications__head .aiweb-dash-notices__readall {
margin-block-start: 0;
}
.aiweb-notifications__list {
gap: var(--space-2);
}
.aiweb-notifications__list .aiweb-notif {
padding: var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background-color: var(--surface);
}
.aiweb-notifications__list .aiweb-notif.is-unread {
border-color: var(--color-primary-soft);
}
.aiweb-notifications__empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding-block: var(--space-12);
color: var(--text-secondary);
text-align: center;
}
.aiweb-notifications__empty-icon {
color: var(--text-muted);
}
.aiweb-notif-optout {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background-color: var(--surface);
}
.aiweb-notif-optout__label {
font-size: var(--fs-body);
color: var(--text-primary);
}
.aiweb-notif-optout__switch {
position: relative;
flex: none;
display: inline-flex;
align-items: center;
inline-size: var(--space-12);
block-size: var(--space-6);
padding: 0;
border: 0;
border-radius: var(--radius-pill);
background-color: var(--border);
cursor: pointer;
transition: background-color var(--transition-base);
}
.aiweb-notif-optout__switch.is-on {
background-color: var(--color-primary);
}
.aiweb-notif-optout__switch:disabled {
opacity: .6;
cursor: default;
}
.aiweb-notif-optout__knob {
position: absolute;
inset-inline-start: var(--space-1);
inline-size: var(--space-4);
block-size: var(--space-4);
border-radius: var(--radius-pill);
background-color: var(--surface);
box-shadow: var(--shadow-card);
transition: inset-inline-start var(--transition-base);
}
.aiweb-notif-optout__switch.is-on .aiweb-notif-optout__knob {
inset-inline-start: calc(var(--space-12) - var(--space-4) - var(--space-1));
}
@media (prefers-reduced-motion: reduce) {
.aiweb-notif-optout__switch,
.aiweb-notif-optout__knob {
transition: none;
}
}
.aiweb-support-page {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.aiweb-support-page__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
flex-wrap: wrap;
}
.aiweb-support-page__lead {
margin: 0;
flex: 1 1 auto;
min-inline-size: 0;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-secondary);
}
.aiweb-support-page__new {
flex: 0 0 auto;
}
.aiweb-support-page__phone {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
border-radius: var(--radius-lg);
background-color: var(--surface);
box-shadow: var(--shadow-card);
color: inherit;
text-decoration: none;
transition: box-shadow var(--transition-base);
}
.aiweb-support-page__phone:hover {
box-shadow: var(--shadow-hover);
}
.aiweb-support-page__phone-icon {
flex: 0 0 auto;
display: grid;
place-items: center;
inline-size: var(--space-10);
block-size: var(--space-10);
border-radius: var(--radius-pill);
background-color: var(--color-primary-soft);
color: var(--color-primary);
}
.aiweb-support-page__phone-text {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.aiweb-support-page__phone-label {
font-size: var(--fs-caption);
color: var(--text-secondary);
}
.aiweb-support-page__phone-num {
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-support-page__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.aiweb-ticket-card {
border-radius: var(--radius-lg);
background-color: var(--surface);
box-shadow: var(--shadow-card);
transition: box-shadow var(--transition-base);
}
.aiweb-ticket-card:hover {
box-shadow: var(--shadow-hover);
}
.aiweb-ticket-card__link {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4);
color: inherit;
text-decoration: none;
}
.aiweb-ticket-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.aiweb-ticket-card__subject {
flex: 1 1 auto;
min-inline-size: 0;
font-size: var(--fs-body-lg);
font-weight: var(--fw-semibold);
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.aiweb-ticket-card__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3);
font-size: var(--fs-caption);
color: var(--text-secondary);
}
.aiweb-ticket-card__date {
display: inline-flex;
align-items: center;
gap: var(--space-1);
}
.aiweb-ticket-card__date svg {
color: var(--text-muted);
}
.aiweb-ticket-prio {
font-size: var(--fs-caption);
color: var(--text-secondary);
}
.aiweb-ticket-prio--high {
color: var(--color-discount);
font-weight: var(--fw-semibold);
}
.aiweb-ticket {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.aiweb-ticket__back {
display: inline-flex;
align-items: center;
gap: var(--space-1);
align-self: flex-start;
color: var(--text-secondary);
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
text-decoration: none;
}
.aiweb-ticket__back:hover {
color: var(--color-primary);
}
.aiweb-ticket__head {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-block-end: var(--space-4);
border-block-end: 1px solid var(--border);
}
.aiweb-ticket__subject {
margin: 0;
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-ticket__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3);
font-size: var(--fs-caption);
color: var(--text-secondary);
}
.aiweb-ticket__id {
color: var(--text-muted);
}
.aiweb-ticket__thread {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.aiweb-ticket-msg {
max-inline-size: 88%;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-lg);
}
.aiweb-ticket-msg--customer {
align-self: flex-start;
background-color: var(--color-primary-soft);
border-end-start-radius: var(--radius-sm);
}
.aiweb-ticket-msg--staff {
align-self: flex-end;
background-color: var(--surface);
border: 1px solid var(--border);
box-shadow: var(--shadow-card);
border-end-end-radius: var(--radius-sm);
}
.aiweb-ticket-msg__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-block-end: var(--space-1);
}
.aiweb-ticket-msg__author {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
color: var(--text-primary);
}
.aiweb-ticket-msg--staff .aiweb-ticket-msg__author {
color: var(--color-primary-fg);
}
.aiweb-ticket-msg__date {
font-size: var(--fs-caption);
color: var(--text-muted);
}
.aiweb-ticket-msg__body {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-primary);
overflow-wrap: anywhere;
}
.aiweb-ticket-msg__body p {
margin: 0 0 var(--space-2);
}
.aiweb-ticket-msg__body p:last-child {
margin-block-end: 0;
}
.aiweb-ticket__closed {
margin: 0;
padding: var(--space-4);
border-radius: var(--radius-md);
background-color: var(--background);
color: var(--text-secondary);
font-size: var(--fs-body);
text-align: center;
}
.aiweb-ticket__reply {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-block-start: var(--space-4);
border-block-start: 1px solid var(--border);
}
.aiweb-ticket__reply-label {
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
color: var(--text-primary);
}
.aiweb-ticket__reply-input {
inline-size: 100%;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background-color: var(--surface);
color: var(--text-primary);
font-family: inherit;
font-size: var(--fs-body);
line-height: var(--lh-body);
resize: vertical;
}
.aiweb-ticket__reply-input:focus {
outline: none;
border-color: var(--color-primary);
}
.aiweb-ticket__reply-btn {
align-self: flex-start;
}
.aiweb-ticket-form {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.aiweb-ticket-form__row {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.aiweb-ticket-form__label {
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
color: var(--text-primary);
}
.aiweb-ticket-form__input {
inline-size: 100%;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background-color: var(--surface);
color: var(--text-primary);
font-family: inherit;
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.aiweb-ticket-form__input:focus {
outline: none;
border-color: var(--color-primary);
}
.aiweb-ticket-form__textarea {
resize: vertical;
min-block-size: calc(var(--space-16) + var(--space-8));
}
.aiweb-ticket-form__select {
appearance: none;
cursor: pointer;
}
.aiweb-ticket-form__submit {
margin-block-start: var(--space-1);
}
.aiweb-vieworder__tracking {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
border-radius: var(--radius-lg);
background-color: var(--color-primary-soft);
}
.aiweb-vieworder__tracking-icon {
flex: 0 0 auto;
display: grid;
place-items: center;
inline-size: var(--space-10);
block-size: var(--space-10);
border-radius: var(--radius-pill);
background-color: var(--surface);
color: var(--color-primary);
}
.aiweb-vieworder__tracking-body {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.aiweb-vieworder__tracking-label {
font-size: var(--fs-caption);
color: var(--text-secondary);
}
.aiweb-vieworder__tracking-code {
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
color: var(--text-primary);
letter-spacing: .04em;
}