/* Modern Gala Registration Form Styles */
* {
    box-sizing: border-box;
}

.gala-registration-container {
    max-width: 1450px;
    margin: 0 auto;
    padding: 15px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: linear-gradient(135deg, #136BA9 0%, #764ba2 100%);
    min-height: 100vh;
}

/* Header Section */
.registration-header {
    text-align: center;
    margin-bottom: 40px;
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.header-content .gala-logo {
    font-size: 4rem;
    margin-bottom: 20px;
}

.main-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 10px 0;
    background: linear-gradient(135deg, #136BA9 0%, #136BA9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sub-title {
    font-size: 1.5rem;
    color: #4a5568;
    margin: 0 0 0 0;
    font-weight: 400;
}

.ticket-price-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, #136BA9 0%, #764ba2 100%);
    color: white;
    padding: 20px 40px;
    border-radius: 15px;
    margin-top: 20px;
}

.price-highlight {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.price-description {
    font-size: 1rem;
    opacity: 0.9;
}

/* Two Panel Layout */
.form-panels-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

.form-panel {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    border: 1px solid rgba(255,255,255,0.18);
}

/* Form Sections Container */
.form-sections-container {
    display: flex;
    flex-direction: column;
    gap: 35px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 25px 20px;
    backdrop-filter: blur(10px);
}

/* Section Styles */
.form-section {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.section-panel {
    background: #ffffff;
    border-radius: 12px;
    padding-top: 0px;
    padding-right: 30px;
    padding-bottom: 5px;
    padding-left: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    max-width: none;
}

    .section-panel:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 35px rgba(0,0,0,0.1);
    }

.panel-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f7fafc;
}

.panel-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.panel-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    margin: 0 0 12px 0;
}

.panel-subtitle {
    color: #718096;
    font-size: 1rem;
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(19, 107, 169, 0.2);
    position: relative;
}

.panel-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding-bottom: 20px;
}

/* Modern Form Controls */
.input-group-modern {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modern-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #4a5568;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .modern-label.required::after {
        content: '*';
        color: #e53e3e;
        margin-left: -2px;
        font-size: large;
        font-weight: bolder;
    }

.label-icon {
    font-size: 1.2rem;
}

.modern-input, .modern-textarea, .modern-select {
    padding: 15px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #fafafa;
    font-family: inherit;
}

    .modern-input:focus, .modern-textarea:focus, .modern-select:focus {
        outline: none;
        border-color: #136BA9;
        background: white;
        box-shadow: 0 0 0 4px rgba(19, 107, 169, 0.1);
        transform: translateY(-2px);
    }

.modern-textarea {
    min-height: 100px;
    resize: vertical;
}

.character-count {
    font-size: 0.8rem;
    color: #a0aec0;
    text-align: right;
}

/* Ticket Showcase */
.ticket-showcase {
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    margin-bottom: 30px;
    border: 2px solid #e2e8f0;
}

.ticket-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 15px;
}

.price-currency {
    font-size: 1.5rem;
    font-weight: 600;
    color: #4a5568;
}

.price-amount {
    font-size: 3rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0 8px;
}

.price-text {
    font-size: 1.2rem;
    color: #718096;
}

.ticket-description {
    color: #4a5568;
    font-style: italic;
}

/* Quantity Controls */
.quantity-selection {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ticket-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}

.ticket-counter-left .quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
}

.quantity-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.qty-btn {
    width: 45px;
    height: 45px;
    border: 2px solid #cbd5e1;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 600;
    color: #4a5568;
    transition: all 0.2s ease;
}

    .qty-btn:hover {
        background: #f7fafc;
        border-color: #136BA9;
        color: #136BA9;
        transform: scale(1.05);
    }

.quantity-input {
    width: 80px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 600;
    padding: 12px;
}

.amount-display-section {
    text-align: center;
}

.amount-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f7fafc;
    padding: 15px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
}

.currency-symbol {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
}

.amount-input {
    border: none;
    background: transparent;
    font-size: 1.8rem;
    font-weight: 700;
    color: #38a169;
    text-align: center;
    width: 120px;
}

    .amount-input:focus {
        outline: none;
        box-shadow: none;
    }

/* Newsletter Section */
.newsletter-section {
    background: #f0fff4;
    border: 2px solid #c6f6d5;
    border-radius: 15px;
    padding: 20px;
}

.newsletter-box {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.modern-checkbox {
    width: 20px;
    height: 20px;
    margin: 0;
}

.newsletter-label {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    cursor: pointer;
    flex: 1;
}

.newsletter-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.newsletter-icon {
    font-size: 1.5rem;
}

.newsletter-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .newsletter-text strong {
        color: #2d3748;
        font-weight: 600;
    }

    .newsletter-text span {
        color: #4a5568;
        font-size: 0.9rem;
    }

/* Address Section */
.address-section {
    background: white;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.section-header {
    text-align: center;
    margin-bottom: 30px;
}

.section-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.section-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #2d3748;
    margin: 0 0 8px 0;
}

.section-subtitle {
    color: #718096;
    font-size: 1rem;
    margin: 0;
}

.address-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.address-row {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 20px;
}

    .address-row:last-child {
        grid-template-columns: 2fr 1fr 1fr;
    }

.input-group-modern.small {
    min-width: 0;
}

.input-group-modern.medium {
    min-width: 0;
}

.input-group-modern.large {
    min-width: 0;
}

/* Attendee Section */
.attendee-section {
    background: white;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.attendee-card {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 15px;
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

    .attendee-card:hover {
        border-color: #cbd5e1;
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    }

.attendee-header {
    background: linear-gradient(135deg, #136BA9 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.attendee-number {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
}

.attendee-title {
    font-size: 1.3rem;
    margin: 0;
    font-weight: 600;
    color: ghostwhite !important;
}

.attendee-fields {
    padding: 25px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.dietary-section, .accommodation-section {
    grid-column: 1 / -1;
}

.radio-options {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 15px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

    .radio-option:hover {
        background: #f7fafc;
    }

.radio-custom {
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    position: relative;
    transition: all 0.2s ease;
}

.radio-option input[type="radio"]:checked + .radio-custom {
    border-color: #136BA9;
    background: #136BA9;
}

    .radio-option input[type="radio"]:checked + .radio-custom::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        background: white;
        border-radius: 50%;
    }

.radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    pointer-events: auto;
}

.dietary-input {
    margin-top: 10px;
}

.dietary-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

    .dietary-row .radio-options {
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .dietary-row .dietary-input-compact {
        flex: 1;
        margin-top: 0;
        max-width: 580px;
    }

    .dietary-row .accommodation-inline {
        flex-shrink: 0;
        padding: 8px 12px;
        background: #f0f8ff;
        border: 1px solid #d1e7dd;
        border-radius: 8px;
        margin: 0;
    }

.accommodation-inline .checkbox-content {
    font-size: 0.85rem;
}

.checkbox-modern {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 15px;
    background: #f0fff4;
    border: 2px solid #c6f6d5;
    border-radius: 10px;
    transition: all 0.2s ease;
}

    .checkbox-modern:hover {
        background: #e6fffa;
        border-color: #9ae6b4;
    }

.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #68d391;
    border-radius: 4px;
    position: relative;
    transition: all 0.2s ease;
}

.modern-checkbox:checked + .checkbox-custom {
    background: #38a169;
    border-color: #38a169;
}

    .modern-checkbox:checked + .checkbox-custom::after {
        content: '✓';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 12px;
        font-weight: bold;
    }

.modern-checkbox {
    position: absolute;
    opacity: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    pointer-events: auto;
}

.checkbox-content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #2d3748;
}

.checkbox-icon {
    font-size: 1.2rem;
}

/* Payment Section */
.payment-section {
    background: white;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.payment-security-notice {
    background: #e6fffa;
    border: 2px solid #81e6d9;
    border-radius: 10px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
    color: #234e52;
}

.security-icon {
    font-size: 1.5rem;
}

.payment-fields {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.payment-row {
    display: grid;
    grid-template-columns: 50% 30% 20%;
    gap: 5px;
    align-items: start;
}

.credit-card-field {
    min-width: 0;
}

.expiry-month-field {
    min-width: 0;
}

.expiry-year-field {
    min-width: 0;
}

.payment-row .modern-input,
.payment-row .modern-select {
    width: 100%;
    box-sizing: border-box;
}

.card-input {
    position: relative;
}

.card-types {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
}

.card-type {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

    .card-type.visa {
        background: #1a365d;
        color: white;
    }

    .card-type.mastercard {
        background: #c53030;
        color: white;
    }

.field-note {
    font-size: 0.85rem;
    color: #718096;
    font-style: italic;
}

.expiry-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Submission Section */
.submission-section {
    background: white;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    margin-bottom: 30px;
    margin-top: 50px;
}

.captcha-wrapper {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.form-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
}

.btn-secondary, .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.btn-secondary {
    background: #f7fafc;
    color: #4a5568;
    border-color: #cbd5e1;
}

    .btn-secondary:hover {
        background: #edf2f7;
        border-color: #a0aec0;
        transform: translateY(-2px);
        text-decoration: none;
        color: #2d3748;
    }

.btn-primary {
    background: linear-gradient(135deg, #136BA9 0%, #764ba2 100%);
    color: white;
    border: none;
    min-width: 200px;
}

    .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(19, 107, 169, 0.3);
    }

.btn-icon {
    font-size: 1.2rem;
}

/* Error Messages */
.error-message {
    color: #e53e3e;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 5px;
}

.validation-summary {
    margin-top: 20px;
    text-align: center;
}

.validation-errors {
    background: #fed7d7;
    border: 2px solid #fc8181;
    border-radius: 10px;
    padding: 20px;
    color: #c53030;
}

.validation-summary-valid {
    display: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .gala-registration-container {
        padding: 15px;
    }

    .registration-header {
        padding: 25px;
    }

    .main-title {
        font-size: 2rem;
    }

    .sub-title {
        font-size: 1.2rem;
    }

    .form-panels-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .gala-registration-container {
        padding: 10px;
    }

    .form-sections-container {
        padding: 25px 20px;
    }

    .form-section {
        gap: 20px;
    }

    .section-panel {
        padding: 25px 20px;
    }

    .form-panel {
        padding: 20px;
    }

    .address-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .attendee-fields {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .expiry-fields {
        grid-template-columns: 1fr;
    }

    .payment-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .form-actions {
        flex-direction: column;
        gap: 15px;
    }

    .btn-secondary, .btn-primary {
        width: 100%;
        justify-content: center;
    }

    .radio-options {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .radio-option {
        width: 100%;
        justify-content: flex-start;
    }

    .quantity-controls {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .header-content .gala-logo {
        font-size: 3rem;
    }

    .main-title {
        font-size: 1.8rem;
    }

    .price-highlight {
        font-size: 1.5rem;
    }

    .form-panel {
        padding: 15px;
    }

    .panel-icon {
        font-size: 2.5rem;
    }

    .section-icon {
        font-size: 2.5rem;
    }
}

/* Additional CSS for Reorganized Layout */

/* Panel Text Container */
.panel-text {
    flex: 1;
}

/* Personal Information Two-Column Layout */
.personal-info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.email-newsletter-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Address Three-Column Layout */
.address-row-3col {
    display: grid;
    grid-template-columns: 20% 30% 48%;
    gap: 15px;
    margin-bottom: 20px;
}

    .address-row-3col .modern-input,
    .address-row-3col .modern-select {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

@media (max-width: 768px) {
    .personal-info-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .address-row-3col {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .dietary-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

        .dietary-row .dietary-input-compact {
            max-width: none;
            width: 100%;
        }

    /* Additional responsive rules for attendee sections */
    .attendee-card {
        padding: 15px;
    }

    .attendee-fields {
        padding: 15px;
    }

    .dietary-row .accommodation-inline {
        width: 100%;
        margin-top: 10px;
    }

    .accommodation-inline .checkbox-content {
        font-size: 0.8rem;
    }

    .radio-options {
        flex-wrap: wrap;
        gap: 15px;
    }

    .modern-input, .modern-select {
        font-size: 16px; /* Prevents zoom on iOS */
        width: 100%;
        box-sizing: border-box;
    }

    /* Ensure input groups are full width on mobile */
    .input-group-modern {
        width: 100%;
    }

    /* Fix any overflow issues */
    .attendee-section {
        overflow: hidden;
    }

    .dietary-section {
        width: 100%;
        overflow: visible;
    }
}

/* Payment Section Center Layout */
.payment-section-center {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

    .payment-section-center .section-panel {
        max-width: 100%;
        width: 100%;
        padding-bottom: 30px;
    }

.payment-panel {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    border: 2px solid #cbd5e0;
}

/* Newsletter Section */
.newsletter-section {
    margin-top: 20px;
}

.newsletter-box {
    background: linear-gradient(135deg, #e6f7ff, #bae7ff);
    border: 2px solid #40a9ff;
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.newsletter-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    margin: 0;
}

.checkbox-icon {
    font-size: 1.2rem;
}

/* Modern Textarea */
.modern-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #ffffff;
    font-family: inherit;
    resize: vertical;
    min-height: 140px;
}

    .modern-textarea:focus {
        outline: none;
        border-color: #136BA9;
        box-shadow: 0 0 0 3px rgba(19, 107, 169, 0.1);
        transform: translateY(-1px);
    }

.character-count {
    font-size: 0.8rem;
    color: #64748b;
    text-align: right;
    margin-top: 5px;
    font-style: italic;
}

    .character-count.warning {
        color: #f59e0b;
        font-weight: 500;
    }

    .character-count.limit-reached {
        color: #ef4444;
        font-weight: 600;
    }

/* Ticket Info Card */
.ticket-info-card {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border: 2px solid #0ea5e9;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.ticket-visual {
    display: flex;
    align-items: center;
    gap: 15px;
}

.ticket-icon {
    font-size: 2.5rem;
}

.ticket-details h4 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
    color: #1e293b;
    font-weight: 700;
}

.ticket-details p {
    margin: 0;
    color: #64748b;
    font-size: 0.95rem;
}

/* Quantity Controls */
.quantity-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

.qty-btn {
    width: 40px;
    height: 40px;
    border: 2px solid #136BA9;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.2rem;
    color: #136BA9;
    transition: all 0.3s ease;
}

    .qty-btn:hover {
        background: #136BA9;
        color: white;
        transform: scale(1.05);
    }

.quantity-input {
    width: 80px;
    text-align: center;
    font-weight: bold;
    font-size: 1.1rem;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
}

    /* Hide number input spinners */
    .quantity-input::-webkit-outer-spin-button,
    .quantity-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .quantity-input[type=number] {
        -moz-appearance: textfield;
    }

/* Amount Display */
/*.amount-display-section {
    margin-top: 20px;
}*/

.amount-display {
    display: flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border: 2px solid #86efac;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 8px;
}

.currency-symbol {
    font-size: 1.2rem;
    font-weight: bold;
    color: #166534;
}

.amount-input {
    background: transparent !important;
    border: none !important;
    font-size: 1.2rem;
    font-weight: bold;
    color: #166534;
    width: 100px;
}

    .amount-input:focus {
        outline: none;
        box-shadow: none;
        transform: none;
    }

/* Attendee Panel Specific */
.attendee-panel .panel-content {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
}

.attendee-panel .attendee-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Scrollbar for attendee section */
.attendee-panel .panel-content::-webkit-scrollbar {
    width: 6px;
}

.attendee-panel .panel-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.attendee-panel .panel-content::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

    .attendee-panel .panel-content::-webkit-scrollbar-thumb:hover {
        background: #a0aec0;
    }

/* Print Styles */
@media print {
    .gala-registration-container {
        box-shadow: none;
        border-radius: 0;
    }

    .btn-primary, .btn-secondary {
        display: none;
    }

    .payment-section-center {
        break-inside: avoid;
    }
}