/* Auto-generated: consolidated inline CSS from MasterPage.master, login.aspx, member.aspx, order.aspx */


/* ===== MasterPage.master (purged) ===== */
.totalprice-txt {
color: var(--color_yellow)!important;
}

.discount-txt {
color:  #2D88A9 !important;
}



/* ===== login.aspx (purged) ===== */
.login-page {
background: #F7F5E8;
}

.login-container {
padding: 3rem 0;
}

.login-card {
max-width: 1100px;
            margin: 0 auto 4rem;
            background: #ffffff;
            border-radius: 1.25rem;
            border: 1px solid #e5e7eb;
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
            padding: 3rem 3.5rem;
}

.login-header {
text-align: center;
            margin-bottom: 1.8rem;
}

.login-header h1 {
font-size: var(--size_28);
            letter-spacing: 0.15em;
            font-weight: 800;
            color: #2A3A2C;
}

.login-header h2 {
margin-top: 0.35rem;
            font-size: 0.8rem;
            letter-spacing: 0.25em;
            color: #9CA3AF;
            text-transform: uppercase;
}

.login-card .section-intro {
font-size: var(--size_16);
            color: #4B5563;
            text-align: center;
            margin-bottom: 2.2rem;
}

.login-body {
margin-top: 0.5rem;
}

.login-body .login-row {
display: grid;
            grid-template-columns: 1fr;
            gap: 2.2rem;
}

.login-section {
background: #FFFFFF;
            border-radius: 1rem;
            border: 1px solid #E5E7EB;
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
            padding: 1.8rem 1.6rem;
}

.login-section .item-title {
font-size: var(--size_18);
            font-weight: 700;
            margin-bottom: 1.4rem;
            display: flex;
            align-items: center;
            gap: 0.4rem;
}

.login-section .item-title::before {
content: "";
            width: 4px;
            height: 18px;
            border-radius: 999px;
            background: linear-gradient(180deg, #FACC15, #F97316);
            display: inline-block;
}

.login-section .form-group.row {
margin-bottom: 0.9rem;
}

.login-section .control-label {
font-size: var(--size_15);
            color: #374151;
}

.login-section .control-text {
font-size: var(--size_15);
}

.login-section .form-control {
font-size: var(--size_15);
}

.login-section .mark-required {
color: #DC2626;
            margin-left: 2px;
}

#btnSendCode.btn {
white-space: nowrap;
            padding: 0.55rem 0.9rem;
            font-size: var(--size_14);
}

#smsHint {
color: #6B7280;
}

.login-small-text {
font-size: 0.88rem;
            color: #6B7280;
}

.login-section .btn-box {
padding-top: 1rem;
            text-align: center;
}

.login-section .btn.btn-block {
width: 100%;
}

.login-extra-note {
font-size: 0.85rem;
            color: #6B7280;
            margin-top: 0.5rem;
}

.form-check-input {
width: 16px;
            height: 16px;
            margin-top: 0px;
}

.form-check-label {
font-size: var(--size_15);
            color: #374151;
}

.login-tabs {
display: flex;
            border-radius: 999px;
            background: #F3F4F6;
            padding: 0.25rem;
            margin-bottom: 1.5rem;
}

.login-tab {
flex: 1;
            border: none;
            background: transparent;
            padding: 0.6rem 0.5rem;
            border-radius: 999px;
            font-size: 0.95rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            color: #6B7280;
            cursor: pointer;
}

.login-tab.active {
background: #FFFFFF;
            color: #111827;
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}

.tab-pane {
display: none;
}

.tab-pane.active {
display: block;
}

.social-login {
margin-top: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
}

:root {
--brand-orange: #f97316;
            --brand-orange-soft: #fbbf24;
}

.social-login {
display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
}

.social-btn {
position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            padding: 0.55rem 1rem;
            border-radius: 999px;
            font-size: 0.95rem;
            font-weight: 600;
            letter-spacing: 0.03em;
            text-decoration: none;
            cursor: pointer;
            border: 1px solid var(--brand-orange);
            color: #374151;
            background: #fff;
            flex: 1 1 100%;
            transition: all 0.18s ease-out;
}

.social-btn__icon {
display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border-radius: 999px;
            font-size: 0.8rem;
            font-weight: 700;
}

.social-btn:hover {
background: linear-gradient(135deg, var(--brand-orange-soft), var(--brand-orange));
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(249, 115, 22, 0.35);
}

.social-btn:active {
transform: translateY(0);
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}

.social-btn--fb {
border-color: #1877f2;
}

.social-btn--fb .social-btn__icon {
background: #1877f2;
            color: #fff;
}

.social-btn--google {
border-color: #333;
}

.social-btn--google .social-btn__icon {
background: #333;
            color: #fff;
}

.social-btn--fb:hover .social-btn__icon,
       
        .social-btn--google:hover .social-btn__icon {
background: rgba(255, 255, 255, 0.16);
}

.social-btn--line {
background-color: #06c755;
            color: #fff;
}

.social-btn--line:hover {
background-color: #05b94d;
}

.pw-field {
position: relative;
}

.pw-field .form-control {
padding-right: 44px;
}

.pw-toggle {
position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            width: 34px;
            height: 34px;
            border-radius: 10px;
            border: 1px solid rgba(249, 115, 22, .25);
            background: #fff;
            color: #f97316;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.pw-toggle:hover {
background: rgba(249,115,22,.06);
            border-color: rgba(249,115,22,.45);
            box-shadow: 0 6px 16px rgba(0,0,0,.06);
            transform: translateY(-50%) scale(1.03);
}

.pw-toggle:active {
transform: translateY(-50%) scale(0.98);
}

.pw-toggle svg {
width: 18px;
            height: 18px;
            display: block;
}

.login-small-link {
display:inline-block;
            font-size:.95rem;
            color:#f97316;
            font-weight:700;
            text-decoration:none;
}

.login-small-link:hover {
text-decoration:underline;
}

.fp-modal {
position: fixed; inset: 0; z-index: 9999;
}

.fp-backdrop {
position:absolute; inset:0; background: rgba(0,0,0,.45);
}

.fp-dialog {
position: relative;
                max-width: 460px;
                margin: 8vh auto;
                background:#fff;
                border-radius: 14px;
                border: 1px solid rgba(0,0,0,.08);
                box-shadow: 0 24px 60px rgba(0,0,0,.22);
                overflow:hidden;
}

.fp-head {
display:flex; align-items:center; justify-content:space-between;
                padding: 14px 16px;
                border-bottom:1px solid #eee;
}

.fp-title {
font-weight:800; letter-spacing:.06em; color:#2A3A2C;
}

.fp-x {
width:36px;height:36px;border-radius:10px;
                border:1px solid rgba(0,0,0,.08);
                background:#fff; cursor:pointer;
}

.fp-body {
padding: 16px;
}

.fp-foot {
padding: 14px 16px; border-top:1px solid #eee; display:flex; gap:10px; justify-content:flex-end;
}

.fp-captcha-row {
display:flex; gap:10px; align-items:center;
}

.fp-captcha {
min-width: 140px;
                height: 40px;
                display:flex; align-items:center; justify-content:center;
                border-radius: 12px;
                border: 1px dashed rgba(249,115,22,.6);
                background: #FFFBEB;
                color:#b45309;
                font-weight:900;
                letter-spacing:.22em;
                user-select:none;
                cursor:pointer;
}

.fp-msg {
margin-top:8px; font-size:.9rem; color:#b91c1c;
}

@media (max-width: 767.98px) {

  .login-card {
    margin: 0 -0.25rem 3.5rem;
                    padding: 2rem 1.5rem;
                    border-radius: 1rem;
  }

  .login-header h1 {
    font-size: var(--size_24);
  }

  .login-body .login-row {
    gap: 1.8rem;
  }

  .login-section {
    padding: 1.6rem 1.25rem;
  }

}

@media (min-width: 768px) {

  .login-body .login-row {
    grid-template-columns: 1fr 1fr;
                    gap: 2.8rem;
  }

}

@media (min-width: 1200px) {

  .login-card {
    padding: 3.2rem 4rem;
  }

}

@media (min-width: 768px) {

  .social-login--full .social-btn {
    flex: 1 1 calc(33.333% - 0.6rem);
  }

}



/* ===== member.aspx (purged) ===== */
.member-page-section {
background-color: #fcfbf9; 
            padding-top: 5rem;
            padding-bottom: 5rem;
}

.member-wrapper {
display: flex;
            gap: 30px;
}

.member-sidebar {
flex: 0 0 250px;
            max-width: 250px;
            background: #fff;
            border-radius: 0.5rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.03);
            border: 1px solid #eee;
            position: sticky;
            top: 120px; 
            height: fit-content;
}

.member-sidebar h4 {
font-family: 'Noto Serif TC', serif;
            font-size: 1.2rem;
            color: var(--color_brown);
            padding: 1.5rem;
            margin-bottom: 0;
            border-bottom: 1px solid #E3EBC3;
}

.member-menu ul {
list-style: none;
            padding: 0;
            margin: 0;
}

.member-menu li a {
display: block;
            padding: 1rem 1.5rem;
            color: var(--text_black);
            font-size: 1rem;
            font-weight: 500;
            transition: all 0.3s ease;
            border-left: 5px solid transparent;
}

.member-menu li a:hover {
background-color: #f5f5f5;
            border-left-color: var(--color_green);
            color: var(--color_green);
}

.member-menu li a.active {
background-color: #F3F8F4; 
            border-left-color: var(--color_green);
            color: var(--color_green);
            font-weight: 700;
}

.member-menu li a i {
margin-right: 8px;
}

.member-content {
flex-grow: 1;
            background: #fff;
            border-radius: 0.5rem;
            padding: 2.5rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.03);
            border: 1px solid #eee;
}

.content-header {
margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #eee;
}

.content-header h3 {
font-family: 'Noto Serif TC', serif;
            color: var(--color_brown);
            font-size: 1.8rem;
}

.form-label {
font-weight: 600;
            color: var(--text_black);
            margin-bottom: 0.3rem;
}

.field {
margin-bottom: 1.5rem;
}

.form-control, select {
border-radius: 0.25rem;
            border: 1px solid #ddd;
            padding: 0.6rem 1rem;
            box-shadow: none;
            transition: border-color 0.3s;
}

.form-control:focus, select:focus {
border-color: var(--color_green);
            box-shadow: 0 0 0 0.2rem rgba(101, 140, 111, 0.25);
}

.grid-2 {
display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
}

.grid-3 {
display: grid;
            grid-template-columns: 1fr 2fr 2fr; 
            gap: 10px;
            align-items: center;
}

.grid-3 select {
width: 100%;
}

.actions {
margin-top: 2rem;
            padding-top: 1rem;
            border-top: 1px solid #eee;
            display: flex;
            gap: 15px;
            justify-content: flex-end;
}

.btn-ghost {
background-color: transparent;
            color: var(--color_brown);
            border: 1px solid var(--color_brown);
}

.btn-ghost:hover {
background-color: var(--color_brown);
            color: #fff;
            border-color: var(--color_brown);
}

.btn-primary {
background-color: var(--color_green);
            border-color: var(--color_green);
}

.btn-primary:hover {
background-color: #55775F; 
            border-color: #55775F;
}


.verify-badge {
display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
}

.verify-badge.ok {
color: #1b5e20;
    background: #e8f5e9;
    border: 1px solid #81c784;
}

.verify-badge.no {
color: #b45309;
    background: #fff7ed;
    border: 1px solid #fdba74;
}

.social-btn {
display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 14px;border-radius:8px;
  font-size:14px;font-weight:600;text-decoration:none;
  border:1px solid transparent;transition:.2s;
}

.social-btn--facebook {
background:#1877f2;color:#fff;
}

.social-btn--facebook:hover {
filter:brightness(.95);
}

.social-btn--google {
background:#fff;color:#222;border-color:#ddd;
}

.social-btn--google:hover {
background:#f7f7f7;
}

.social-btn--line {
background:#06c755;color:#fff;
}

.social-btn--line:hover {
filter:brightness(.95);
}

.social-bind .bind-row {
display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #eee;
}

.social-bind .bind-row:last-child {
border-bottom:0;
}

.social-bind .ok {
color:#22a06b;font-weight:700;margin-left:10px;
}

.social-bind .no {
color:#999;margin-left:10px;
}

.social-bind .tag {
display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;
}

.tag--fb {
background:#e8f0ff;color:#1877f2;
}

.tag--gg {
background:#f3f3f3;color:#444;
}

.tag--ln {
background:#eafff2;color:#06c755;
}

@media (max-width: 991.98px) {

  .member-wrapper {
    flex-direction: column;
                    gap: 20px;
  }

  .member-sidebar {
    flex: none;
                    max-width: 100%;
                    position: static;
  }

  .member-content {
    padding: 1.5rem;
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }

  .actions {
    justify-content: center;
  }

}



/* ===== order.aspx (purged) ===== */
<style>
       
       
        .member-page-section {
background-color: #fcfbf9; 
            padding-top: 5rem;
            padding-bottom: 5rem;
}

.member-wrapper {
display: flex;
            gap: 30px;
}

.member-sidebar {
flex: 0 0 250px;
            max-width: 250px;
            background: #fff;
            border-radius: 0.5rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.03);
            border: 1px solid #eee;
            position: sticky;
            top: 120px; 
            height: fit-content;
}

.member-sidebar h4 {
font-family: 'Noto Serif TC', serif;
            font-size: 1.2rem;
            color: var(--color_brown);
            padding: 1.5rem;
            margin-bottom: 0;
            border-bottom: 1px solid #E3EBC3;
}

.member-menu ul {
list-style: none;
            padding: 0;
            margin: 0;
}

.member-menu li a {
display: block;
            padding: 1rem 1.5rem;
            color: var(--text_black);
            font-size: 1rem;
            font-weight: 500;
            transition: all 0.3s ease;
            border-left: 5px solid transparent;
}

.member-menu li a:hover {
background-color: #f5f5f5;
            border-left-color: var(--color_green);
            color: var(--color_green);
}

.member-menu li a.active {
background-color: #F3F8F4; 
            border-left-color: var(--color_green);
            color: var(--color_green);
            font-weight: 700;
}

.member-menu li a i {
margin-right: 8px;
}

.member-content {
flex-grow: 1;
            background: #fff;
            border-radius: 0.5rem;
            padding: 2.5rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.03);
            border: 1px solid #eee;
}

.member-content h3 {
color: var(--color_brown);
            font-family: "Noto Serif TC", serif;
            font-size: 1.8rem;
            margin-bottom: 2rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #E3EBC3;
}

.order-card {
border: 1px solid #ddd;
            border-radius: 0.5rem;
            margin-bottom: 1.5rem;
            overflow: hidden;
            transition: box-shadow 0.3s ease;
}

.order-card:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.order-header {
display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 1.5rem;
            background-color: #F3F8F4; 
            border-bottom: 1px solid #eee;
}

.order-header-info span {
display: block;
            font-size: 0.9rem;
            color: #666;
}

.order-header-info strong {
color: var(--color_brown);
            font-weight: 700;
}

.order-header .status-badge {
padding: 0.5em 1em;
            border-radius: 0.25rem;
            font-weight: 600;
            font-size: 0.9rem;
}

.status-badge.pending {
background-color: #fff8e1; 
            color: var(--color_yellow);
            border: 1px solid var(--color_yellow);
}

.status-badge.shipped {
background-color: #e8f5e9; 
            color: var(--color_green);
            border: 1px solid var(--color_green);
}

.status-badge.completed {
background-color: #e3f2fd; 
            color: var(--color_blue);
            border: 1px solid var(--color_blue);
}

.status-badge.cancelled {
background-color: #fce4e4; 
            color: var(--color_red);
            border: 1px solid var(--color_red);
}

.order-body {
padding: 1.5rem;
}

.order-toggle-btn {
background: transparent;
            color: var(--color_blue);
            border: none;
            text-decoration: underline;
            padding: 0;
            font-size: 1rem;
            cursor: pointer;
            transition: color 0.3s;
}

.order-toggle-btn:hover {
color: var(--color_green);
}

.order-detail-collapse {
margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px dashed #eee;
}

.detail-table {
width: 100%;
            border-collapse: collapse;
}

.detail-table th, .detail-table td {
padding: 0.5rem 0.2rem;
            font-size: 0.9rem;
            text-align: left;
            border-bottom: 1px solid #f5f5f5;
}

.detail-table th {
color: var(--color_brown);
            font-weight: 600;
            border-bottom: 2px solid #ddd;
}

.detail-table tr:last-child td {
border-bottom: none;
}

.detail-table .product-name {
font-weight: 500;
            color: var(--text_black);
}

.detail-table .summary-row td {
font-weight: 600;
            color: var(--color_brown);
            padding-top: 1rem;
            border-top: 1px dashed #ddd;
}

.detail-table .total-row td {
font-size: 1rem;
            font-weight: 700;
         
            padding-bottom: 0;
}

@media (max-width: 991.98px) {

  .member-wrapper {
    flex-direction: column;
                    gap: 20px;
  }

  .member-sidebar {
    flex: none;
                    max-width: 100%;
                    position: static;
  }

  .member-content {
    padding: 1.5rem;
  }

  .order-header {
    flex-direction: column;
                     align-items: flex-start;
                     gap: 10px;
  }

}