/* Registration / plan selection page */

.auth-plans-main {
    max-width: 28rem;
}

.auth-plans-header h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.02em;
}


.auth-plans-header p {
    margin-top: 0.375rem;
    font-size: 0.875rem;
    color: #64748b;
}


.auth-plans-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.75rem;
}

.auth-plan-card .message {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.auth-plan-card__inner {
    overflow: hidden;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 8px 32px rgba(16, 24, 40, 0.07), 0 0 0 1px rgba(16, 24, 40, 0.03);
}


.auth-plan-card__header {
    padding: 1.25rem 1.5rem;
    text-align: center;
    background: linear-gradient(135deg, #ec2a7b 0%, #7b61ff 100%);
}

.auth-plans-grid .plans-list:nth-child(1) .auth-plan-card__header {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
}

.auth-plans-grid .plans-list:nth-child(2) .auth-plan-card__header {
    background: linear-gradient(135deg, #f43f5e 0%, #ec2a7b 100%);
}

.auth-plans-grid .plans-list:nth-child(3) .auth-plan-card__header {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.auth-plans-grid .plans-list:nth-child(4) .auth-plan-card__header {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
}

.auth-plan-card__header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}

.auth-plan-card__header .auth-plan-discount {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
}

.auth-plan-card__body {
    padding: 1.5rem;
}

.auth-plan-price {
    margin-bottom: 1rem;
    text-align: center;
}

.auth-plan-price__amount {
    font-size: 1.75rem;
    font-weight: 800;
    color: #ec2a7b;
    letter-spacing: -0.03em;
}

.auth-plan-price__amount span {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
}

.auth-plan-price__strike {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #94a3b8;
    text-decoration: line-through;
}

.auth-plan-card__desc {
    margin-bottom: 1rem;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #64748b;
}


.auth-plan-coupon-wrap {
    margin-bottom: 1rem;
}

.auth-plan-coupon-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.75rem;
    border-radius: 0.625rem;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    font-size: 0.875rem;
    font-weight: 600;
    color: #166534;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.auth-plan-coupon-btn:hover {
    background: #dcfce7;
    border-color: #86efac;
}


.auth-plan-coupon-input {
    display: none;
    margin-top: 0.75rem;
    width: 100%;
    height: 2.75rem;
    border-radius: 0.625rem;
    border: 1px dashed #86efac;
    background: #f0fdf4;
    padding: 0 1rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #166534;
}


.auth-plan-promo-hint {
    display: block;
    margin-top: 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    color: #16a34a;
}

.auth-plan-subscribe {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 3rem;
    border-radius: 0.625rem;
    background: #ec2a7b;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.auth-plan-subscribe:hover {
    background: #d41f6a;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -6px rgba(236, 42, 123, 0.4);
}

.auth-plans-empty {
    border-radius: 1rem;
    border: 1px dashed #e2e8f0;
    padding: 2rem;
    text-align: center;
    font-size: 0.875rem;
    color: #64748b;
}

/* Show only the last plan (existing business rule) */
.auth-plans-grid .plans-list {
    display: none !important;
}

.auth-plans-grid .plans-list:last-child {
    display: block !important;
}

/* Bootstrap modal — modernized for auth pages */
.plan-order-modal .modal-dialog {
    width: calc(100% - 2rem);
    max-width: 28rem;
    margin: 1.5rem auto;
}

#order_details .modal-content,
.plan-order-modal .modal-content {
    overflow: hidden;
    border: none;
    border-radius: 1.25rem;
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.16);
}

#order_details .modal-header,
.plan-order-modal .modal-header {
    border-bottom: 1px solid #f1f5f9;
    padding: 1.25rem 1.5rem;
}

#order_details .modal-title,
.plan-order-modal .modal-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
}

#order_details .modal-body,
.plan-order-modal .modal-body {
    padding: 1.5rem;
}

.plan-order-details {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.plan-order-details__form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.plan-order-details__banner {
    padding: 1.25rem 1.5rem;
    border-radius: 1rem;
    text-align: center;
    background: linear-gradient(135deg, #ec2a7b 0%, #7b61ff 100%);
}

.plan-order-details__plan-name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}

.plan-order-details__plan-price {
    margin: 0.375rem 0 0;
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
}

.plan-order-details__section,
.plan-order-details__coupon {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.plan-order-details__label {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
}

.plan-order-details__options {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.plan-order-details__option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.875rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.plan-order-details__option:hover {
    border-color: #cbd5e1;
    background: #fff;
}

.plan-order-details__option:has(input:checked) {
    border-color: #a5b4fc;
    background: #eef2ff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.plan-order-details__option input[type="radio"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    flex-shrink: 0;
    accent-color: #6366f1;
}

.plan-order-details__option-text {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #334155;
    line-height: 1.4;
}

.plan-order-details__coupon .form-control {
    height: 2.75rem;
    border-radius: 0.75rem;
    border-color: #e2e8f0;
    font-size: 0.9375rem;
}

.plan-order-details__amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 1.25rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.875rem;
    background: #f8fafc;
    text-align: center;
}

.plan-order-details__amount-label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #64748b;
}

.plan-order-details__amount-value {
    font-size: 1.375rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.plan-order-details__savings {
    margin: -0.25rem 0 0;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #16a34a;
}

.plan-order-details__checkout {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 3rem;
    margin-top: 0.25rem;
    border: none;
    border-radius: 0.75rem;
    background: #ec2a7b;
    font-size: 0.9375rem;
    font-weight: 600;
}

.plan-order-details__checkout:hover {
    background: #d41f6a;
}

.plan-order-details .submit-promo {
    margin-top: 0.25rem;
    border-radius: 0.75rem;
}

.plan-order-details .error {
    font-size: 0.8125rem;
    color: #dc2626;
}

.plan-order-details .success {
    font-size: 0.8125rem;
    color: #16a34a;
}

/* Legacy selectors kept for other subscription pages loading the same partial */
#planContainer .subscription-plan .card {
    border: none;
    box-shadow: none;
    padding: 0 !important;
}

#planContainer .card-heading {
    margin: 0 0 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #ec2a7b 0%, #7b61ff 100%);
}

#planContainer .card-heading h3,
#planContainer .card-heading h4 {
    display: block !important;
    margin: 0;
    color: #fff;
}

#planContainer .card-heading h3 {
    font-size: 1.25rem;
    font-weight: 700;
}

#planContainer .card-heading h4 {
    margin-top: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 500;
    opacity: 0.92;
}

#planContainer .card-body {
    padding: 0;
}

#planContainer .form-group h6 {
    display: block !important;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
}

#planContainer .checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
    padding: 0.875rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #f8fafc;
    font-size: 0.9375rem;
    color: #334155;
}

#planContainer .card-body > h5 {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.875rem;
    padding: 1.25rem 1rem !important;
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    background: #f8fafc;
    text-align: center;
}

#planContainer .card-body > h6:last-of-type {
    display: block !important;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #16a34a;
    text-align: center;
}

#planContainer #checkout {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 3rem;
    margin-top: 0.25rem;
    border: none;
    border-radius: 0.75rem;
    background: #ec2a7b;
    font-weight: 600;
}

#planContainer #checkout:hover {
    background: #d41f6a;
}

#planContainer .submit-promo {
    margin-top: 0.5rem;
    border-radius: 0.75rem;
}

@media (min-width: 640px) {
    .auth-plans-main {
        max-width: 26rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-plan-subscribe {
        transition: none;
    }
}