/* ========================================
   TASU+ Auth & MyPage Styles
   Design tokens from TASU+ brand system
   ======================================== */

/* --- CSS Custom Properties --- */
:root {
    --tasu-bg: #FFFEF3;
    --tasu-navy: #0E1D42;
    --tasu-olive: #4C512A;
    --tasu-green: #85A443;
    --tasu-green-hover: #6D8836;
    --tasu-border: #CFD2D9;
    --tasu-error: #C04040;
    --tasu-error-bg: #FFF0F0;
    --tasu-success: #85A443;
    --tasu-success-bg: #F5F9ED;
    --tasu-font-heading: 'Space Mono', 'Andale Mono', monospace;
    --tasu-font-body: 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --tasu-radius-input: 14px;
    --tasu-radius-btn: 6px;
    --tasu-radius-card: 20px;
    --tasu-shadow-card: 0 8px 32px rgba(14, 29, 66, 0.08);
    --tasu-shadow-card-hover: 0 12px 40px rgba(14, 29, 66, 0.12);
    --tasu-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   Auth Card Layout (Login, Forgot Password)
   ======================================== */
.tasu-authPage {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px 80px;
    background-color: var(--tasu-bg);
}

.tasu-authPage__header {
    text-align: center;
    margin-bottom: 40px;
}

.tasu-authPage__title {
    font-family: var(--tasu-font-heading);
    font-size: 36px;
    font-weight: 400;
    color: var(--tasu-olive);
    margin: 0 0 8px;
    letter-spacing: 1px;
}

.tasu-authPage__subtitle {
    font-family: var(--tasu-font-body);
    font-size: 16px;
    color: var(--tasu-navy);
    opacity: 0.7;
    margin: 0;
}

.tasu-authCard {
    width: 100%;
    max-width: 480px;
    background: #FFFFFF;
    border-radius: var(--tasu-radius-card);
    box-shadow: var(--tasu-shadow-card);
    padding: 48px 40px;
    transition: box-shadow var(--tasu-transition);
}

.tasu-authCard:hover {
    box-shadow: var(--tasu-shadow-card-hover);
}

.tasu-authCard--wide {
    max-width: 720px;
}

.tasu-authCard--extrawide {
    max-width: 860px;
}

/* --- Auth Card Icon --- */
.tasu-authCard__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tasu-green) 0%, var(--tasu-olive) 100%);
    margin: 0 auto 32px;
    box-shadow: 0 4px 16px rgba(133, 164, 67, 0.25);
}

.tasu-authCard__icon svg {
    width: 32px;
    height: 32px;
    color: #FFFEF3;
}

/* ========================================
   Form Elements
   ======================================== */

/* --- Input Groups --- */
.tasu-formGroup {
    margin-bottom: 20px;
}

.tasu-formGroup:last-child {
    margin-bottom: 0;
}

.tasu-formGroup__label {
    display: block;
    font-family: var(--tasu-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--tasu-navy);
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.tasu-formGroup__label .ec-required {
    color: var(--tasu-error);
    font-size: 12px;
    margin-left: 4px;
}

/* --- Text Inputs --- */
.tasu-authCard input[type="text"],
.tasu-authCard input[type="email"],
.tasu-authCard input[type="password"],
.tasu-authCard input[type="tel"],
.tasu-authCard input[type="number"],
.tasu-authCard textarea,
.tasu-authCard select,
.tasu-formCard input[type="text"],
.tasu-formCard input[type="email"],
.tasu-formCard input[type="password"],
.tasu-formCard input[type="tel"],
.tasu-formCard input[type="number"],
.tasu-formCard textarea,
.tasu-formCard select {
    width: 100%;
    padding: 14px 20px;
    border: 1px solid var(--tasu-border);
    border-radius: var(--tasu-radius-input);
    background: var(--tasu-bg);
    font-family: var(--tasu-font-body);
    font-size: 15px;
    color: var(--tasu-navy);
    outline: none;
    transition: border-color var(--tasu-transition), box-shadow var(--tasu-transition);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.tasu-authCard input::placeholder,
.tasu-formCard input::placeholder {
    color: var(--tasu-navy);
    opacity: 0.4;
}

.tasu-authCard input:focus,
.tasu-authCard select:focus,
.tasu-authCard textarea:focus,
.tasu-formCard input:focus,
.tasu-formCard select:focus,
.tasu-formCard textarea:focus {
    border-color: var(--tasu-green);
    box-shadow: 0 0 0 3px rgba(133, 164, 67, 0.15);
}

/* Error state */
.tasu-authCard .error input,
.tasu-authCard .error select,
.tasu-formCard .error input,
.tasu-formCard .error select {
    border-color: var(--tasu-error);
    background: var(--tasu-error-bg);
}

.tasu-authCard .error input:focus,
.tasu-formCard .error input:focus {
    box-shadow: 0 0 0 3px rgba(192, 64, 64, 0.12);
}

/* Select arrow fix */
.tasu-authCard select,
.tasu-formCard select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8.5L1 3.5h10L6 8.5z' fill='%230E1D42'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

/* --- Half-width inputs (name fields) --- */
.tasu-halfInput {
    display: flex;
    gap: 12px;
}

.tasu-halfInput input {
    flex: 1;
    min-width: 0;
}

/* --- Checkbox --- */
/* Handles two rendering modes:
   1. EC-CUBE form_div_layout: input + label > span (flat siblings)
   2. Symfony default: div.form-check > input.form-check-input + label.form-check-label
*/
.tasu-checkbox {
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Symfony default .form-check wrapper (used in login page) */
.tasu-checkbox .form-check {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
}

/* The checkbox input itself */
.tasu-checkbox > input[type="checkbox"],
.tasu-checkbox .form-check-input,
.tasu-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin: 0 !important;
    accent-color: var(--tasu-green) !important;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
    -webkit-appearance: auto;
    appearance: auto;
}

/* The label next to the checkbox */
.tasu-checkbox > label,
.tasu-checkbox .form-check-label,
.tasu-checkbox label label {
    display: inline;
    font-family: var(--tasu-font-body);
    font-size: 14px;
    font-weight: 400 !important;
    color: var(--tasu-navy);
    cursor: pointer;
    margin-bottom: 0 !important;
    line-height: 1.5;
}

.tasu-checkbox > label span {
    font-weight: 400 !important;
}

/* Terms text next to checkbox */
.tasu-checkbox__terms {
    font-family: var(--tasu-font-body);
    font-size: 14px;
    color: var(--tasu-navy);
    line-height: 1.5;
}

.tasu-checkbox a {
    color: var(--tasu-green);
    text-decoration: underline;
}

/* EC-CUBE ec-checkbox override inside tasu cards */
.tasu-authCard .ec-checkbox,
.tasu-formCard .ec-checkbox {
    margin: 20px 0;
}

.tasu-authCard .ec-checkbox label,
.tasu-formCard .ec-checkbox label {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    font-family: var(--tasu-font-body);
    font-size: 14px;
    font-weight: 500 !important;
    color: var(--tasu-navy);
    line-height: 1.5;
    cursor: pointer;
    margin-bottom: 0 !important;
}

.tasu-authCard .ec-checkbox input[type="checkbox"],
.tasu-formCard .ec-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0 !important;
    accent-color: var(--tasu-green);
    cursor: pointer;
    flex-shrink: 0;
}

.tasu-authCard .ec-checkbox span,
.tasu-formCard .ec-checkbox span {
    font-weight: 400 !important;
}

.tasu-authCard .ec-checkbox a,
.tasu-formCard .ec-checkbox a {
    color: var(--tasu-green);
    text-decoration: underline;
}

/* --- Radio Buttons --- */
/* Actual structure: .tasu-radio > div#entry_sex > input + label + input + label ... */
.tasu-radio {
    /* wrapper stays block */
}

/* The inner div that form_widget generates */
.tasu-radio > div {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

/* All radio inputs inside */
.tasu-radio input[type="radio"] {
    accent-color: var(--tasu-green) !important;
    width: 18px;
    height: 18px;
    margin: 0 6px 0 0 !important;
    cursor: pointer;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Add left spacing before 2nd, 3rd, etc. radio option */
.tasu-radio label + input[type="radio"] {
    margin-left: 20px !important;
}

/* Labels wrapping the text */
.tasu-radio label {
    display: inline-flex !important;
    align-items: center;
    font-family: var(--tasu-font-body);
    font-size: 15px;
    color: var(--tasu-navy);
    cursor: pointer;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    white-space: nowrap;
    vertical-align: middle;
}

.tasu-radio label span,
.tasu-radio span {
    font-weight: 400 !important;
}

/* --- Global accent-color override for all checkboxes/radios in tasu containers --- */
.tasu-authCard input[type="checkbox"],
.tasu-authCard input[type="radio"],
.tasu-formCard input[type="checkbox"],
.tasu-formCard input[type="radio"],
.tasu-borderedDefs input[type="checkbox"],
.tasu-borderedDefs input[type="radio"],
.tasu-checkbox input[type="checkbox"] {
    accent-color: var(--tasu-green) !important;
}

/* ========================================
   Buttons
   ======================================== */
.tasu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-family: var(--tasu-font-body);
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--tasu-radius-btn);
    cursor: pointer;
    transition: all var(--tasu-transition);
    text-decoration: none;
    border: none;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
}

.tasu-btn--primary {
    background-color: var(--tasu-green);
    color: #FFFEF3;
    box-shadow: 0 4px 12px rgba(133, 164, 67, 0.25);
}

.tasu-btn--primary:hover {
    background-color: var(--tasu-green-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(133, 164, 67, 0.35);
}

.tasu-btn--primary:active {
    transform: translateY(0);
}

.tasu-btn--secondary {
    background: transparent;
    color: var(--tasu-navy);
    border: 1px solid var(--tasu-border);
}

.tasu-btn--secondary:hover {
    border-color: var(--tasu-olive);
    color: var(--tasu-olive);
    background: rgba(76, 81, 42, 0.04);
}

.tasu-btn--cancel {
    background: transparent;
    color: var(--tasu-navy);
    opacity: 0.6;
}

.tasu-btn--cancel:hover {
    opacity: 1;
}

.tasu-btn--inline {
    width: auto;
    padding: 8px 20px;
    font-size: 14px;
    border-radius: 20px;
}

/* Button group */
.tasu-btnGroup {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
}

/* ========================================
   Links
   ======================================== */
.tasu-link {
    font-family: var(--tasu-font-body);
    font-size: 14px;
    color: var(--tasu-green);
    text-decoration: none;
    transition: color var(--tasu-transition);
    cursor: pointer;
}

.tasu-link:hover {
    color: var(--tasu-green-hover);
    text-decoration: underline;
}

.tasu-authCard__links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

/* ========================================
   Error / Success Messages
   ======================================== */
.tasu-errorMessage {
    font-family: var(--tasu-font-body);
    font-size: 14px;
    color: var(--tasu-error);
    margin-top: 6px;
    line-height: 1.4;
}

.tasu-successBox {
    text-align: center;
    padding: 20px 0;
}

.tasu-successBox__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--tasu-success-bg);
    margin: 0 auto 24px;
}

.tasu-successBox__icon svg {
    width: 40px;
    height: 40px;
    color: var(--tasu-green);
}

.tasu-successBox__title {
    font-family: var(--tasu-font-heading);
    font-size: 24px;
    font-weight: 400;
    color: var(--tasu-olive);
    margin: 0 0 12px;
}

.tasu-successBox__desc {
    font-family: var(--tasu-font-body);
    font-size: 15px;
    color: var(--tasu-navy);
    opacity: 0.7;
    margin: 0 0 32px;
    line-height: 1.6;
}

/* ========================================
   Bordered Definitions (Form rows)
   ======================================== */
.tasu-borderedDefs {
    display: flex;
    flex-direction: column;
}

.tasu-borderedDefs dl {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 20px 0;
    margin: 0;
    border-bottom: 1px solid rgba(207, 210, 217, 0.4);
}

.tasu-borderedDefs dl:first-child {
    padding-top: 0;
}

.tasu-borderedDefs dl:last-child {
    border-bottom: none;
}

.tasu-borderedDefs dt {
    flex: 0 0 240px;
    max-width: 240px;
    font-family: var(--tasu-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--tasu-navy);
    padding-top: 0;
    line-height: 48px;
    word-wrap: break-word;
}

.tasu-borderedDefs dd {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding-top: 0;
}

/* Zip input */
.tasu-borderedDefs .ec-zipInput {
    display: flex;
    align-items: center;
    gap: 8px 0;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.tasu-borderedDefs .ec-zipInput > span {
    display: none;
}

.tasu-borderedDefs .ec-zipInput input {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.tasu-borderedDefs .ec-zipInputHelp {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    width: 100%;
    justify-content: flex-end;
}

.tasu-borderedDefs .ec-zipInputHelp a {
    color: var(--tasu-green);
    font-size: 13px;
}

/* Spacing for stacked inputs */
.tasu-borderedDefs .ec-input + .ec-input,
.tasu-borderedDefs .ec-select + .ec-input {
    margin-top: 10px;
}

/* Birth date row */
.tasu-borderedDefs .ec-birth {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tasu-borderedDefs .ec-birth select {
    flex: 1;
    max-width: 100%;
    min-width: 0;
}

.tasu-borderedDefs .ec-birth > span {
    font-family: var(--tasu-font-body);
    color: var(--tasu-navy);
    opacity: 0.5;
}

/* ========================================
   MyPage Layout
   ======================================== */
.tasu-mypagePage {
    background-color: var(--tasu-bg);
    min-height: 60vh;
    padding: 0 0 80px;
}

.tasu-mypagePage .ec-layoutRole__main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 40px 0;
}

/* --- MyPage Header --- */
.tasu-mypageHeader {
    text-align: center;
    padding: 48px 20px 0;
}

.tasu-mypageHeader__title {
    font-family: var(--tasu-font-heading);
    font-size: 36px;
    font-weight: 400;
    color: var(--tasu-olive);
    margin: 0;
    letter-spacing: 1px;
}

/* ========================================
   MyPage Navigation Tabs
   ======================================== */
.tasu-mypageNav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 32px auto 8px;
    max-width: 800px;
    border-bottom: 2px solid rgba(207, 210, 217, 0.5);
}

.tasu-mypageNav__item {
    flex: 1;
    text-align: center;
}

.tasu-mypageNav__item a {
    display: block;
    font-family: var(--tasu-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--tasu-navy);
    opacity: 0.5;
    text-decoration: none;
    padding: 14px 12px;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all var(--tasu-transition);
    white-space: nowrap;
}

.tasu-mypageNav__item a:hover {
    opacity: 0.8;
    color: var(--tasu-olive);
}

.tasu-mypageNav__item.is-active a {
    color: var(--tasu-olive);
    opacity: 1;
    font-weight: 700;
    border-bottom-color: var(--tasu-green);
}

/* Welcome message */
.tasu-welcomeMsg {
    text-align: center;
    padding: 24px 20px 32px;
    font-family: var(--tasu-font-body);
    font-size: 15px;
    color: var(--tasu-navy);
    opacity: 0.7;
}

.tasu-welcomeMsg p {
    margin: 4px 0;
}

/* ========================================
   Order History List
   ======================================== */
.tasu-orderList {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

.tasu-orderList__count {
    font-family: var(--tasu-font-body);
    font-size: 14px;
    color: var(--tasu-navy);
    opacity: 0.6;
    margin-bottom: 20px;
}

.tasu-orderList__empty {
    text-align: center;
    padding: 60px 20px;
    font-family: var(--tasu-font-body);
    font-size: 16px;
    color: var(--tasu-navy);
    opacity: 0.5;
}

/* --- Order Card --- */
.tasu-orderCard {
    background: #FFFFFF;
    border-radius: var(--tasu-radius-card);
    box-shadow: var(--tasu-shadow-card);
    margin-bottom: 20px;
    overflow: hidden;
    transition: box-shadow var(--tasu-transition);
}

.tasu-orderCard:hover {
    box-shadow: var(--tasu-shadow-card-hover);
}

.tasu-orderCard__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: rgba(76, 81, 42, 0.03);
    border-bottom: 1px solid rgba(207, 210, 217, 0.3);
    flex-wrap: wrap;
    gap: 12px;
}

.tasu-orderCard__meta {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.tasu-orderCard__date {
    font-family: var(--tasu-font-body);
    font-size: 14px;
    color: var(--tasu-navy);
    opacity: 0.6;
}

.tasu-orderCard__info {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.tasu-orderCard__info dt {
    font-family: var(--tasu-font-body);
    font-size: 12px;
    color: var(--tasu-navy);
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tasu-orderCard__info dd {
    font-family: var(--tasu-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--tasu-navy);
    margin: 2px 0 0;
}

.tasu-orderCard__detail {
    padding: 20px 28px;
}

/* --- Order Item Row --- */
.tasu-orderItem {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(207, 210, 217, 0.2);
}

.tasu-orderItem:last-child {
    border-bottom: none;
}

.tasu-orderItem__img {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f5f5f0;
}

.tasu-orderItem__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tasu-orderItem__info {
    flex: 1;
    min-width: 0;
}

.tasu-orderItem__name {
    font-family: var(--tasu-font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--tasu-navy);
    margin: 0 0 4px;
}

.tasu-orderItem__variant {
    font-family: var(--tasu-font-body);
    font-size: 13px;
    color: var(--tasu-navy);
    opacity: 0.5;
}

.tasu-orderItem__price {
    font-family: var(--tasu-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--tasu-navy);
    white-space: nowrap;
}

/* ========================================
   Order Detail Page
   ======================================== */
.tasu-orderDetail {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.tasu-orderDetail__main {
    flex: 1;
    min-width: 0;
}

.tasu-orderDetail__sidebar {
    flex: 0 0 320px;
}

.tasu-orderDetail__section {
    background: #FFFFFF;
    border-radius: var(--tasu-radius-card);
    box-shadow: var(--tasu-shadow-card);
    padding: 28px;
    margin-bottom: 24px;
}

.tasu-orderDetail__sectionTitle {
    font-family: var(--tasu-font-heading);
    font-size: 18px;
    font-weight: 400;
    color: var(--tasu-olive);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(76, 81, 42, 0.15);
}

/* Definitions in order detail */
.tasu-definitions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    margin-bottom: 16px;
}

.tasu-definitions dt {
    font-family: var(--tasu-font-body);
    font-size: 13px;
    color: var(--tasu-navy);
    opacity: 0.5;
}

.tasu-definitions dd {
    font-family: var(--tasu-font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--tasu-navy);
    margin: 0;
}

/* Delivery address */
.tasu-deliveryAddress {
    font-family: var(--tasu-font-body);
    font-size: 14px;
    color: var(--tasu-navy);
    line-height: 1.6;
    padding: 16px 0;
    border-top: 1px solid rgba(207, 210, 217, 0.3);
}

.tasu-deliveryAddress p {
    margin: 4px 0;
}

/* Delivery soft definitions */
.tasu-softDef {
    display: flex;
    gap: 8px;
    font-family: var(--tasu-font-body);
    font-size: 14px;
    color: var(--tasu-navy);
    padding: 4px 0;
}

.tasu-softDef dt {
    opacity: 0.5;
}

.tasu-softDef dd {
    margin: 0;
}

/* --- Total Box --- */
.tasu-totalBox {
    background: #FFFFFF;
    border-radius: var(--tasu-radius-card);
    box-shadow: var(--tasu-shadow-card);
    padding: 28px;
    position: sticky;
    top: 140px;
}

.tasu-totalBox__spec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-family: var(--tasu-font-body);
    font-size: 14px;
    color: var(--tasu-navy);
}

.tasu-totalBox__spec dt {
    opacity: 0.6;
}

.tasu-totalBox__spec dd {
    font-weight: 500;
    margin: 0;
}

.tasu-totalBox__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 8px;
    margin-top: 12px;
    border-top: 2px solid var(--tasu-olive);
    font-family: var(--tasu-font-heading);
    font-size: 16px;
    color: var(--tasu-navy);
}

.tasu-totalBox__total .tasu-totalBox__price {
    font-size: 22px;
    font-weight: 700;
    color: var(--tasu-olive);
}

.tasu-totalBox__taxLabel {
    font-family: var(--tasu-font-body);
    font-size: 11px;
    opacity: 0.5;
    margin-left: 4px;
}

.tasu-totalBox__paymentTotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    font-family: var(--tasu-font-heading);
    font-size: 14px;
    color: var(--tasu-olive);
}

.tasu-totalBox__taxRate {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-family: var(--tasu-font-body);
    font-size: 12px;
    color: var(--tasu-navy);
    opacity: 0.5;
}

.tasu-totalBox__taxRate dd {
    margin: 0;
}

/* Mail history */
.tasu-mailItem {
    padding: 12px 0;
    border-bottom: 1px solid rgba(207, 210, 217, 0.3);
}

.tasu-mailItem:last-child {
    border-bottom: none;
}

.tasu-mailItem__time {
    font-family: var(--tasu-font-body);
    font-size: 12px;
    color: var(--tasu-navy);
    opacity: 0.5;
    margin-bottom: 4px;
}

.tasu-mailItem__subject {
    font-family: var(--tasu-font-body);
    font-size: 14px;
    color: var(--tasu-green);
    cursor: pointer;
    text-decoration: none;
}

.tasu-mailItem__subject:hover {
    text-decoration: underline;
}

.tasu-mailItem__body {
    font-family: var(--tasu-font-body);
    font-size: 13px;
    color: var(--tasu-navy);
    line-height: 1.6;
    margin-top: 8px;
    padding: 12px;
    background: rgba(76, 81, 42, 0.03);
    border-radius: 8px;
    display: none;
}

.tasu-mailItem__close {
    margin-top: 8px;
    text-align: right;
}

.tasu-mailItem__close a {
    color: var(--tasu-green);
    font-size: 13px;
    cursor: pointer;
}

/* Reorder button accent */
.tasu-btn--reorder {
    margin-top: 20px;
}

/* Current price accent */
.tasu-priceAccent {
    color: var(--tasu-error);
    font-weight: 600;
    font-size: 13px;
}

/* ========================================
   MyPage Profile Form
   ======================================== */
.tasu-formCard {
    background: #FFFFFF;
    border-radius: var(--tasu-radius-card);
    box-shadow: var(--tasu-shadow-card);
    padding: 40px;
    max-width: 860px;
    margin: 0 auto;
}

/* ========================================
   Confirm Page — Read-only Values
   ======================================== */
.tasu-confirmValue {
    font-family: var(--tasu-font-body);
    font-size: 15px;
    color: var(--tasu-navy);
    padding: 14px 0;
}

.tasu-confirmMessage {
    font-family: var(--tasu-font-body);
    font-size: 15px;
    color: var(--tasu-navy);
    line-height: 1.6;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--tasu-success-bg);
    border-radius: 10px;
    border-left: 4px solid var(--tasu-green);
}

/* ========================================
   Pagination Override
   ======================================== */
.tasu-pager {
    display: flex;
    justify-content: center;
    padding: 32px 0;
}

/* ========================================
   Password Reset Info
   ======================================== */
.tasu-forgotIntro {
    font-family: var(--tasu-font-body);
    font-size: 15px;
    color: var(--tasu-navy);
    opacity: 0.7;
    line-height: 1.6;
    margin-bottom: 24px;
}

.tasu-forgotIntro p {
    margin: 0 0 8px;
}

/* ========================================
   Responsive
   ======================================== */
@media screen and (max-width: 1200px) {
    .tasu-orderDetail {
        gap: 24px;
    }

    .tasu-orderDetail__sidebar {
        flex: 0 0 280px;
    }
}

@media screen and (max-width: 991px) {
    .tasu-authPage {
        padding: 40px 16px 60px;
    }

    .tasu-authPage__title {
        font-size: 28px;
    }

    .tasu-authCard {
        padding: 32px 24px;
    }

    .tasu-authCard--wide,
    .tasu-authCard--extrawide {
        max-width: 100%;
    }

    .tasu-borderedDefs dt {
        flex: 0 0 100%;
        padding-top: 0;
        margin-bottom: 8px;
    }

    .tasu-borderedDefs dd {
        flex: 0 0 100%;
    }

    .tasu-mypageHeader__title {
        font-size: 28px;
    }

    .tasu-mypageNav {
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tasu-mypageNav::-webkit-scrollbar {
        display: none;
    }

    .tasu-mypageNav__item {
        flex: none;
    }

    .tasu-orderDetail {
        flex-direction: column;
    }

    .tasu-orderDetail__sidebar {
        flex: none;
        width: 100%;
    }

    .tasu-totalBox {
        position: static;
    }

    .tasu-mypagePage .ec-layoutRole__main {
        padding: 24px 16px 0;
    }

    .tasu-formCard {
        padding: 24px 20px;
    }
}

@media screen and (max-width: 767px) {
    .tasu-authPage {
        padding: 24px 12px 40px;
    }

    .tasu-authPage__title {
        font-size: 24px;
    }

    .tasu-authCard {
        padding: 28px 20px;
        border-radius: 16px;
    }

    .tasu-authCard__icon {
        width: 60px;
        height: 60px;
        margin-bottom: 24px;
    }

    .tasu-authCard__icon svg {
        width: 28px;
        height: 28px;
    }

    .tasu-halfInput {
        flex-direction: column;
        gap: 10px;
    }

    .tasu-orderCard__header {
        padding: 16px 20px;
    }

    .tasu-orderCard__detail {
        padding: 16px 20px;
    }

    .tasu-orderCard__meta {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .tasu-mypageHeader {
        padding: 32px 16px 0;
    }

    .tasu-mypageHeader__title {
        font-size: 22px;
    }

    .tasu-mypageNav__item a {
        font-size: 13px;
        padding: 10px 12px;
    }

    .tasu-borderedDefs .ec-birth {
        flex-wrap: wrap;
    }

    .tasu-borderedDefs .ec-birth select {
        max-width: 100px;
    }

    .tasu-orderDetail__section {
        padding: 20px;
    }

    .tasu-totalBox {
        padding: 20px;
    }
}

/* ========================================
   Override EC-CUBE default styles on
   auth/mypage pages
   ======================================== */
.mypage .ec-layoutRole__contents,
.registration_page .ec-layoutRole__contents {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.mypage .ec-layoutRole__main,
.registration_page .ec-layoutRole__main {
    padding: 0;
}

/* Hide default ec-pageHeader when custom header is used */
.tasu-authPage .ec-pageHeader,
.tasu-mypagePage .ec-pageHeader {
    display: none;
}

/* Reset default form margins within tasu cards */
.tasu-authCard .ec-input,
.tasu-authCard .ec-halfInput,
.tasu-authCard .ec-select,
.tasu-authCard .ec-telInput,
.tasu-authCard .ec-checkbox,
.tasu-authCard .ec-radio,
.tasu-authCard .ec-birth,
.tasu-authCard .ec-zipInput,
.tasu-formCard .ec-input,
.tasu-formCard .ec-halfInput,
.tasu-formCard .ec-select,
.tasu-formCard .ec-telInput,
.tasu-formCard .ec-checkbox,
.tasu-formCard .ec-radio,
.tasu-formCard .ec-birth,
.tasu-formCard .ec-zipInput {
    margin-bottom: 0;
}

/* --- ec-label & ec-required override --- */
.tasu-authCard .ec-label,
.tasu-formCard .ec-label,
.tasu-borderedDefs .ec-label {
    display: inline-block;
    font-family: var(--tasu-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--tasu-navy);
    margin-bottom: 0;
}

.tasu-authCard .ec-required,
.tasu-formCard .ec-required,
.tasu-borderedDefs .ec-required {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    background-color: var(--tasu-green);
    color: #FFFEF3;
    font-size: 10px;
    font-weight: 600;
    font-family: var(--tasu-font-body);
    border-radius: 4px;
    vertical-align: middle;
    letter-spacing: 0.5px;
    line-height: 1.4;
}

/* --- ec-radio override inside tasu cards/forms --- */
.tasu-authCard .ec-radio,
.tasu-formCard .ec-radio,
.tasu-borderedDefs .ec-radio {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.tasu-authCard .ec-radio div,
.tasu-formCard .ec-radio div,
.tasu-borderedDefs .ec-radio div {
    display: inline-flex !important;
    align-items: center;
}

.tasu-authCard .ec-radio label,
.tasu-formCard .ec-radio label,
.tasu-borderedDefs .ec-radio label {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-family: var(--tasu-font-body);
    font-size: 15px;
    color: var(--tasu-navy);
    cursor: pointer;
    margin-right: 0 !important;
    white-space: nowrap;
}

.tasu-authCard .ec-radio input[type="radio"],
.tasu-formCard .ec-radio input[type="radio"],
.tasu-borderedDefs .ec-radio input[type="radio"] {
    accent-color: var(--tasu-green);
    width: 18px;
    height: 18px;
    margin: 0 !important;
    cursor: pointer;
}

.tasu-authCard .ec-radio span,
.tasu-formCard .ec-radio span,
.tasu-borderedDefs .ec-radio span {
    font-weight: 400 !important;
}

/* --- ec-checkbox override inside tasu bordered defs --- */
.tasu-borderedDefs .ec-checkbox {
    margin: 8px 0;
}

.tasu-borderedDefs .ec-checkbox label {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    font-family: var(--tasu-font-body);
    font-size: 14px;
    color: var(--tasu-navy);
    cursor: pointer;
    margin-bottom: 0 !important;
    font-weight: 500 !important;
}

.tasu-borderedDefs .ec-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0 !important;
    accent-color: var(--tasu-green);
    cursor: pointer;
    flex-shrink: 0;
}

.tasu-borderedDefs .ec-checkbox span {
    font-weight: 400 !important;
}

/* --- Select override: restore native appearance inside cards --- */
.tasu-authCard .ec-select,
.tasu-formCard .ec-select,
.tasu-borderedDefs .ec-select {
    margin-bottom: 0;
}

.tasu-authCard .ec-select select,
.tasu-formCard .ec-select select,
.tasu-borderedDefs .ec-select select {
    display: block;
    width: 100%;
    max-width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--tasu-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8.5L1 3.5h10L6 8.5z' fill='%230E1D42'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

/* --- Zip input helper icon override --- */
.tasu-authCard .ec-zipInputHelp__icon .ec-icon img,
.tasu-formCard .ec-zipInputHelp__icon .ec-icon img,
.tasu-borderedDefs .ec-zipInputHelp__icon .ec-icon img {
    width: 10px;
    height: 10px;
    opacity: 0.6;
}

/* EC-CUBE error messages */
.tasu-authCard .ec-errorMessage,
.tasu-formCard .ec-errorMessage {
    color: var(--tasu-error);
    font-family: var(--tasu-font-body);
    font-size: 13px;
    margin-top: 6px;
}

/* Ensure form_errors from Symfony render nicely */
.tasu-authCard .form-error-message,
.tasu-formCard .form-error-message,
.tasu-borderedDefs .form-error-message,
.tasu-authCard ul li,
.tasu-formCard ul li,
.tasu-borderedDefs ul li {
    color: var(--tasu-error);
    font-family: var(--tasu-font-body);
    font-size: 13px;
}

/* --- ec-input/ec-telInput/ec-zipInput reset inside tasu forms --- */
.tasu-borderedDefs .ec-input,
.tasu-borderedDefs .ec-telInput,
.tasu-borderedDefs .ec-zipInput {
    margin-bottom: 0;
}

/* Force ALL text inputs inside tasu bordered defs to be full-width and aligned */
.tasu-borderedDefs .ec-input input,
.tasu-borderedDefs .ec-telInput input,
.tasu-borderedDefs .ec-zipInput input {
    width: 100%;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Phone: override EC-CUBE default max-width: 12em */
.tasu-borderedDefs .ec-telInput {
    display: block;
}

.tasu-borderedDefs .ec-telInput input {
    max-width: 100% !important;
    display: block;
}

/* Zip code: override EC-CUBE default inline-block and max-width: 9em */
.tasu-borderedDefs .ec-zipInput {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tasu-borderedDefs .ec-zipInput input {
    flex: 1;
    min-width: 120px;
    max-width: 100% !important;
}

.tasu-borderedDefs .ec-zipInput > span {
    flex-shrink: 0;
}

/* Ensure ec-select inside bordered defs is full-width */
.tasu-borderedDefs .ec-select {
    display: block;
}

.tasu-borderedDefs .ec-select select {
    width: 100%;
    max-width: 100%;
}