/* ============== COLOR VARIABLES ==================== */
.registration-page { 
    /* AASP Theme */
    --reg-primary: #D1236B; /* aasp-primary (Magenta) */
    --reg-primary-dark: #2D2769; /* aasp-indigo (Indigo) */
    --reg-primary-light: #FDEBF3; /* aasp-primary-light */
    --reg-soft: #FDEBF3; 
    --reg-soft-2: #FFFDF9; 
    --reg-soft-3: #F5E6ED; 
    --reg-gold: #FEB713; /* aasp-accent */
    --reg-gold-light: #FFF9E6; 
    --reg-text: #1E1A47; /* aasp-indigo-dark */
    --reg-body: #2D2769; 
    --reg-muted: #6B668A; 
    --reg-border: #E5CDD8; 
    --reg-border-dark: #D4B8C6; 
    --reg-white: #FFFFFF; 
    --reg-bg: #FFFDF9; 
    
    color: var(--reg-text); 
    padding-top: 50px; 
    padding-bottom: 75px; 
    background: radial-gradient( circle at 100% 0%, rgba(209, 35, 107, .07), transparent 32% ), linear-gradient( 180deg, #FFFFFF 0%, var(--reg-soft-2) 100% ); 
}

/* ================ GLOBAL TEXT INSIDE REGISTRATION ================== */
.registration-page p, .registration-page li, .registration-page td { color: var(--reg-body); }
.registration-page a { color: var(--reg-primary); }
.registration-page a:hover { color: var(--reg-primary-dark); }

/* =========== SECTION =================== */
.registration-section { margin-bottom: 60px; }
.registration-section:last-child { margin-bottom: 0; }

/* ============== SECTION HEADER ==================== */
.registration-heading { margin-bottom: 28px; text-align: center; }
/* Small label above heading */
.registration-heading-label { margin-bottom: 8px; color: var(--reg-primary); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
/* Main section heading */
.registration-title { margin: 0; color: var(--reg-primary-dark); font-size: clamp(27px, 3vw, 38px); font-weight: 700; line-height: 1.25; }
/* Small line under heading */
.registration-title-line { width: 65px; height: 4px; margin: 15px auto 0; background: linear-gradient( 90deg, var(--reg-primary-dark) 0%, var(--reg-primary) 100% ); border-radius: 10px; }

/* =========================================================
CONTENT CARD
========================================================= */
.registration-card { position: relative; padding: 30px 32px; color: var(--reg-text); background: var(--reg-white); border: 1px solid var(--reg-border); border-radius: 20px; box-shadow: 0 10px 35px rgba(45, 39, 105, .07); transition: box-shadow .25s ease, transform .25s ease; }
/* Optional subtle hover */
.registration-card:hover { box-shadow: 0 14px 40px rgba(45, 39, 105, .09); }

/* ============= CARD TITLE ===================== */
.registration-card-title { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; color: var(--reg-primary-dark); font-size: 19px; font-weight: 700; line-height: 1.4; }
/* Icon */
.registration-card-title i { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; color: var(--reg-primary); background: var(--reg-soft); border-radius: 11px; font-size: 18px; }

/* ================ REGISTRATION INFORMATION LIST ======================= */
.registration-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 0; padding: 0; list-style: none; }
/* List item */
.registration-list li { position: relative; min-height: 52px; padding: 13px 16px 13px 45px; color: var(--reg-body); background: var(--reg-soft-2); border: 1px solid var(--reg-border); border-radius: 12px; font-size: 15px; font-weight: 400; line-height: 1.65; transition: background .2s ease, border-color .2s ease; }
.registration-list li:hover { background: var(--reg-soft); border-color: var(--reg-primary); }
/* Check icon */
.registration-list li::before { content: '✓'; position: absolute; top: 13px; left: 14px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: #FFFFFF; background: var(--reg-primary); border-radius: 50%; font-size: 12px; font-weight: 700; }

/* ============== REGISTRATION GUIDELINE / FLOW IMAGE ================== */
.registration-flow-card { position: relative; padding: 22px; overflow: hidden; background: linear-gradient( 135deg, #FFFFFF 0%, var(--reg-soft-2) 100% ); border: 1px solid var(--reg-border); border-radius: 20px; box-shadow: 0 10px 35px rgba(45, 39, 105, .07); }
.registration-flow-card img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; }

/* ============= INFORMATION NOTICE ===================== */
.registration-notice { display: flex; align-items: flex-start; gap: 15px; margin-top: 20px; padding: 20px 22px; background: linear-gradient( 90deg, var(--reg-soft) 0%, var(--reg-soft-2) 100% ); border: 1px solid var(--reg-border); border-left: 4px solid var(--reg-primary); border-radius: 14px; }
/* Notice icon */
.registration-notice-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; color: var(--reg-primary); background: #FFFFFF; border: 1px solid var(--reg-border); border-radius: 10px; font-size: 18px; }
/* Notice title */
.registration-notice-title { margin-bottom: 5px; color: var(--reg-primary-dark); font-size: 16px; font-weight: 700; }
/* Notice text */
.registration-notice-text { margin: 0; color: var(--reg-body); font-size: 15px; font-weight: 400; line-height: 1.7; }
/* Email / link */
.registration-notice-text a { color: var(--reg-primary); font-weight: 600; text-decoration: none; transition: color .2s ease; }
.registration-notice-text a:hover { color: var(--reg-primary-dark); text-decoration: underline; }

/* =============== TABLE CARD ======================= */
.registration-table-card { position: relative; overflow: hidden; background: #FFFFFF; border-radius: 17px; box-shadow: 0 10px 35px rgba(45, 39, 105, .07); }
/* Horizontal scroll on small devices */
.registration-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ================= BASE TABLE ===================== */
.registration-table { width: 100%; margin: 0; color: var(--reg-text); background: #FFFFFF; border-collapse: separate; border-spacing: 0; border: 1px solid var(--reg-border-dark); border-radius: 16px; overflow: hidden; }
/* All cells */
.registration-table th, .registration-table td { padding: 17px 20px; border-right: 1px solid var(--reg-border-dark); border-bottom: 1px solid var(--reg-border-dark); vertical-align: middle; }
/* Remove border on last column */
.registration-table th:last-child,
.registration-table td:last-child { border-right: 0; }
/* Remove bottom border on last row */
.registration-table tbody tr:last-child td { border-bottom: 0; }

/* ============= TABLE HEADER ==================== */
.registration-table thead th { color: var(--reg-primary-dark); background: var(--reg-soft); border-color: var(--reg-border-dark); font-size: 15px; font-weight: 700; line-height: 1.4; text-align: center; vertical-align: middle; }
/* First header row Category / Registration */
.registration-table thead tr:first-child th { color: var(--reg-primary-dark); background: linear-gradient( 180deg, var(--reg-soft-2) 0%, var(--reg-soft) 100% ); }
/* Second header row Early Bird / Normal / On-Site */
.registration-table thead tr:nth-child(2) th { color: var(--reg-primary-dark); background: var(--reg-soft-2); }

/* ============= TABLE BODY ======================= */
.registration-table tbody td { color: var(--reg-body); background: #FFFFFF; font-size: 15px; font-weight: 400; line-height: 1.6; transition: background .2s ease; }
/* Zebra */
.registration-table tbody tr:nth-child(even) td { background: #FFF5F9; }
/* Hover */
.registration-table tbody tr:hover td { background: var(--reg-soft); }

/* ============= REGISTRATION FEES =================== */
.registration-category { color: var(--reg-primary-dark) !important; font-weight: 600 !important; }
/* Price */
.registration-price { color: var(--reg-primary) !important; font-size: 17px !important; font-weight: 700 !important; white-space: nowrap; }

/* ============= PAYMENT ACCOUNT TABLE ================= */
.payment-account-table .payment-label { width: 250px; color: var(--reg-primary-dark); background: var(--reg-soft); font-size: 15px; font-weight: 600; }
.payment-account-table .payment-value { color: var(--reg-body); background: #FFFFFF; font-size: 15px; }
/* Hover */
.payment-account-table tbody tr:hover .payment-label,
.payment-account-table tbody tr:hover .payment-value { background: #FFF5F9; }

/* ================ PAYMENT DATES TABLE ================= */
/* Date column */
.payment-date-table .date-column { width: 34%; color: var(--reg-primary) !important; font-weight: 700; white-space: nowrap; }
/* Details column */
.payment-date-table .detail-column { width: 66%; color: var(--reg-primary-dark); font-weight: 400; }
/* Payment date header */
.payment-date-table thead th { color: var(--reg-primary-dark); background: var(--reg-soft); }

/* =============== RECEIPT CARD ========================== */
.receipt-card { position: relative; display: flex; align-items: flex-start; gap: 20px; padding: 28px 30px; overflow: hidden; background: linear-gradient( 135deg, #1E1A47 0%, #2D2769 48%, #D1236B 100% ); border-radius: 20px; box-shadow: 0 15px 40px rgba(45, 39, 105, .18); }
/* Subtle decoration */
.receipt-card::after { content: ''; position: absolute; top: -80px; right: -80px; width: 220px; height: 220px; background: rgba(255, 255, 255, .05); border-radius: 50%; }
/* Receipt icon */
.receipt-icon { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; min-width: 52px; color: #FFFFFF; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; font-size: 23px; }
/* Receipt content */
.receipt-content { position: relative; z-index: 2; color: rgba(255, 255, 255, .90); font-size: 15px; line-height: 1.8; }
/* Receipt title */
.receipt-title { display: block; margin-bottom: 4px; color: #FFFFFF; font-size: 18px; font-weight: 700; }
/* Receipt highlight */
.receipt-highlight { color: var(--reg-gold); font-weight: 700; }

/* ================ BOOTSTRAP OVERRIDE INSIDE REGISTRATION ========================= */
/* ป้องกัน Bootstrap .table-hover / .table-active เดิมมาทับสีใหม่ */
.registration-page .table { color: var(--reg-text); }
.registration-page .table-active,
.registration-page .table-active > th,
.registration-page .table-active > td { color: var(--reg-primary-dark); background-color: var(--reg-soft); }

/* ================ SCROLLBAR FOR TABLE ================= */
.registration-table-scroll::-webkit-scrollbar { height: 7px; }
.registration-table-scroll::-webkit-scrollbar-track { background: var(--reg-soft-2); border-radius: 10px; }
.registration-table-scroll::-webkit-scrollbar-thumb { background: var(--reg-border-dark); border-radius: 10px; }
.registration-table-scroll::-webkit-scrollbar-thumb:hover { background: var(--reg-primary); }

/* ================ TABLET ================= */
@media (max-width: 991.98px) {
    .registration-page { padding-top: 45px; padding-bottom: 65px; }
    .registration-section { margin-bottom: 52px; }
    .registration-list { gap: 12px; }
    .registration-card { padding: 27px 25px; }
}

/* ============== MOBILE ================= */
@media (max-width: 767.98px) {
    .registration-page { padding-top: 35px; padding-bottom: 55px; }
    .registration-section { margin-bottom: 45px; }
    /* Heading */
    .registration-heading { margin-bottom: 22px; }
    .registration-heading-label { font-size: 11px; letter-spacing: 1.5px; }
    .registration-title { font-size: 27px; }
    .registration-title-line { width: 55px; height: 3px; margin-top: 12px; }
    /* Card */
    .registration-card { padding: 22px 18px; border-radius: 16px; }
    .registration-card-title { font-size: 17px; }
    /* List */
    .registration-list { grid-template-columns: 1fr; }
    /* Flow */
    .registration-flow-card { padding: 10px; border-radius: 16px; }
    /* Notice */
    .registration-notice { padding: 17px; gap: 12px; }
    /* Table */
    .registration-table { min-width: 650px; }
    .registration-table th,
    .registration-table td { padding: 14px 15px; font-size: 14px; }
    .registration-price { font-size: 16px !important; }
    /* Payment Dates */
    .payment-date-table { min-width: 600px; }
    /* Receipt */
    .receipt-card { padding: 22px 20px; }
}

/* ========== SMALL MOBILE ================== */
@media (max-width: 480px) {
    .registration-page { padding-top: 30px; padding-bottom: 45px; }
    .registration-title { font-size: 24px; }
    .registration-card-title { font-size: 16px; }
    .registration-card-title i { width: 36px; height: 36px; min-width: 36px; font-size: 16px; }
    .registration-list li { font-size: 14px; }
    .registration-notice-text { font-size: 14px; }
    .receipt-card { gap: 14px; padding: 20px 17px; }
    .receipt-icon { width: 44px; height: 44px; min-width: 44px; font-size: 19px; }
    .receipt-content { font-size: 14px; }
    .receipt-title { font-size: 17px; }
}

/* ================ RESPONSIVE TABLES Conference Fees / Payment Method / Payment Dates ================== */
/* ---------- Desktop ---------- */
.registration-table-card { width: 100%; overflow: hidden; background: #ffffff; border: 1px solid var(--reg-border); border-radius: 16px; box-shadow: 0 10px 35px rgba(45, 39, 105, .06); }
.registration-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.registration-table { width: 100%; min-width: 0; margin: 0; border-collapse: separate; border-spacing: 0; table-layout: auto; border: 0; }
.registration-table th, .registration-table td { padding: 16px 18px; border-right: 1px solid var(--reg-border-dark); border-bottom: 1px solid var(--reg-border-dark); vertical-align: middle; word-break: normal; overflow-wrap: break-word; }
.registration-table th:last-child, .registration-table td:last-child { border-right: 0; }
.registration-table tbody tr:last-child td { border-bottom: 0; }

/* ============ CONFERENCE FEES ================== */
.registration-fee-table { table-layout: fixed; }
.registration-fee-table thead th { text-align: center; }
.registration-fee-table thead tr:first-child th { color: var(--reg-primary-dark); background: var(--reg-soft); }
.registration-fee-table thead tr:nth-child(2) th { color: var(--reg-primary-dark); background: var(--reg-soft-2); }
.registration-fee-table .registration-category { width: 34%; color: var(--reg-primary-dark); font-weight: 600; }
.registration-fee-table .registration-price { color: var(--reg-primary) !important; font-weight: 700; text-align: center; white-space: nowrap; }

/* ================ PAYMENT METHOD =================== */
.payment-account-table { table-layout: fixed; }
.payment-account-table .payment-label { width: 30%; color: var(--reg-primary-dark); background: var(--reg-soft); font-weight: 600; }
.payment-account-table .payment-value { width: 70%; color: var(--reg-primary-dark); background: #ffffff; }

/* ================= PAYMENT DATES ============= */
.payment-date-table { table-layout: fixed; }
.payment-date-table thead th { color: var(--reg-primary-dark); background: var(--reg-soft); font-weight: 700; text-align: left; }
.payment-date-table .date-column { width: 34%; color: var(--reg-primary) !important; font-weight: 700; white-space: normal; }
.payment-date-table .detail-column { width: 66%; color: var(--reg-primary-dark); }

/* ================= TABLET ============== */
@media (max-width: 991.98px) {
    .registration-table th, .registration-table td { padding: 14px 15px; font-size: 14px; }
    .registration-price { font-size: 15px !important; }
}

/* ================= MOBILE =================== */
@media (max-width: 767.98px) {
    .registration-table, .payment-date-table { min-width: 0 !important; }
    .registration-table-card { overflow: visible; border: 0; background: transparent; box-shadow: none; }
    .registration-table-scroll { overflow: visible; }
    
    /* ==================== CONFERENCE FEES ====================== */
    .registration-fee-table { display: table; width: 100%; table-layout: fixed; overflow: hidden; background: #ffffff; border: 1px solid var(--reg-border-dark); border-radius: 12px; }
    .registration-fee-table th, .registration-fee-table td { padding: 12px 7px; font-size: 12px; line-height: 1.4; text-align: center; word-break: normal; overflow-wrap: break-word; }
    .registration-fee-table th:first-child, .registration-fee-table td:first-child { width: 31%; padding-left: 10px; padding-right: 10px; text-align: left; }
    .registration-fee-table .registration-category { font-size: 12px; line-height: 1.4; }
    .registration-fee-table .registration-price { font-size: 13px !important; white-space: normal; }
    
    /* ================= PAYMENT METHOD ============== */
    .payment-account-table, .payment-account-table tbody { display: block; width: 100%; }
    .payment-account-table tr { display: block; width: 100%; margin-bottom: 10px; overflow: hidden; background: #ffffff; border: 1px solid var(--reg-border); border-radius: 12px; }
    .payment-account-table tr:last-child { margin-bottom: 0; }
    .payment-account-table td { display: block; width: 100% !important; border: 0 !important; }
    .payment-account-table .payment-label { width: 100% !important; padding: 10px 14px; color: var(--reg-primary-dark); background: var(--reg-soft); border-bottom: 1px solid var(--reg-border) !important; font-size: 13px; font-weight: 700; }
    .payment-account-table .payment-value { width: 100% !important; min-height: 43px; padding: 11px 14px; color: var(--reg-primary-dark); background: #ffffff; font-size: 14px; }
    
    /* ================= PAYMENT DATES ============= */
    .payment-date-table, .payment-date-table tbody { display: block; width: 100%; }
    .payment-date-table thead { display: none; }
    .payment-date-table tr { display: block; width: 100%; margin-bottom: 12px; overflow: hidden; background: #ffffff; border: 1px solid var(--reg-border); border-radius: 12px; box-shadow: 0 4px 15px rgba(45, 39, 105, .04); }
    .payment-date-table tr:last-child { margin-bottom: 0; }
    .payment-date-table td { display: block; width: 100% !important; border: 0 !important; }
    .payment-date-table .date-column { width: 100% !important; padding: 12px 15px; color: var(--reg-primary) !important; background: var(--reg-soft); border-bottom: 1px solid var(--reg-border) !important; font-size: 13px; font-weight: 700; line-height: 1.5; white-space: normal; }
    .payment-date-table .detail-column { width: 100% !important; padding: 13px 15px; color: var(--reg-primary-dark); background: #ffffff; font-size: 14px; line-height: 1.6; }
}

/* ============ SMALL MOBILE ================= */
@media (max-width: 480px) { 
    .registration-fee-table th,
    .registration-fee-table td { padding: 10px 5px; font-size: 11px; }
    .registration-fee-table th:first-child,
    .registration-fee-table td:first-child { width: 30%; padding-left: 8px; padding-right: 8px; }
    .registration-fee-table .registration-category { font-size: 11px; }
    .registration-fee-table .registration-price { font-size: 12px !important; }
    /* Payment */
    .payment-account-table .payment-label,
    .payment-date-table .date-column { font-size: 12px; }
    .payment-account-table .payment-value,
    .payment-date-table .detail-column { font-size: 13px; }
}