/* Subscription Cancellation and Resume Styles */

/* Container Styles */
.cancellation-container,
.resume-container {
    padding: 20px;
    max-width: 800px;
}

.cancellation-container h2,
.resume-container h2 {
    color: #59677e;
}

/* Info Panels */
.info-panels {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    margin-top: 30px;
}

.info-panel {
    flex: 1;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #fff;
    margin-bottom: 25px;
}

.info-panels .info-panel {
    margin-bottom: 0;
}

.info-panel-header {
    background: #59677e;
    color: #fff;
    padding: 10px 15px;
    border-bottom: 1px solid #dee2e6;
    font-weight: bold;
    font-size: 14px;
    border-top-left-radius: 0.28571rem;
    border-top-right-radius: 0.28571rem;
}

.info-panel-body {
    padding: 15px;
}

.resume-container .info-panel-body {
    padding: 20px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 13px;
}

.info-row:last-child {
    margin-bottom: 0;
}

.info-label {
    color: #6f7e95;
}

.info-value {
    color: #6f7e95;
}

/* Steps Section */
.steps-section {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 25px;
}

.steps-section h3 {
    margin: 0 0 15px 0;
    font-size: 15px;
    font-weight: 600;
}

.step-item {
    margin-bottom: 15px;
    padding-left: 20px;
    position: relative;
}

.step-item:last-child {
    margin-bottom: 0;
}

.step-item:before {
    content: "•";
    position: absolute;
    left: 0;
    top: -2px;
    line-height: 1;
    color: #59677e;
    font-size: 18px;
    font-weight: bold;
}

.step-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 5px;
}

.step-description {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

/* Documents Section */
.documents-section {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 25px;
}

.documents-section h3 {
    margin: 0 0 15px 0;
    font-size: 15px;
    font-weight: 600;
}

/* Payment Status */
.payment-status-paid {
    color: #28a745;
    font-weight: 300;
}

.payment-status-pending {
    color: #ff8c00;
    font-weight: 300;
}

/* Form Styles for Resume View */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #59677e;
    font-size: 14px;
}

.form-group input[type="date"] {
    width: 100%;
    max-width: 300px;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 14px;
}

.help-text {
    margin-top: 8px;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

/* Button Styles */
.button-delete-style {
    background: #c14747 !important;
    border-color: #c14747 !important;
    color: #fff !important;
}

.button-delete-style:hover {
    background: #a72828 !important;
    border-color: #a72828 !important;
}

.button-warning-style {
    background: #ff8c00 !important;
    border-color: #ff8c00 !important;
    color: #fff !important;
}
.button-warning-style:hover {
    background: #e67e00 !important;
    border-color: #e67e00 !important;
}

.button-green-style {
    background: #28a745 !important;
    border-color: #28a745 !important;
    color: #fff !important;
}

.button-green-style:hover {
    background: #218838 !important;
    border-color: #1e7e34 !important;
}

.button-turquoise-style  {
    background: #47bac1 !important;
    border-color: #47bac1 !important;
    color: #fff !important;
}
.button-turquoise-style:hover {
    background: #639af5 !important;
    border-color: #639af5 !important;
}

/* Error Tooltip - Reusable for displaying error messages */
/* Styled to match browser's native HTML5 validation popup */
.error-tooltip {
    position: absolute;
    background-color: #ffffff;
    color: #333333;
    padding: 8px 12px 8px 32px;
    border-radius: 3px;
    border: 1px solid #c0c0c0;
    font-size: 13px;
    white-space: nowrap;
    z-index: 10000;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.error-tooltip::before {
    content: '!';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-color: #ff9800;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}

.error-tooltip.show {
    opacity: 1;
}

.error-tooltip.fade-out {
    opacity: 0;
}

.error-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.1));
}
/* Inactive label for deactivated reminders */
.inactive-label {
    display: inline-block;
    padding: 3px 8px;
    background-color: #fff3e0;
    color: #ff9800;
    font-size: 11px;
    font-weight: 600;
    border-radius: 3px;
    text-transform: uppercase;
}

/* Payment subscription status labels */
.subscription-label {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 3px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.3;
    text-align: center;
}

a.subscription-label:hover {
    text-decoration: underline;
    font-weight: 600;
}

.subscription-label-active,
a.subscription-label-active:link,
a.subscription-label-active:visited {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.subscription-label-pause-scheduled,
a.subscription-label-pause-scheduled:link,
a.subscription-label-pause-scheduled:visited {
    background-color: #fff3e0;
    color: #e65100;
}

.subscription-label-paused,
a.subscription-label-paused:link,
a.subscription-label-paused:visited {
    background-color: #fff3e0;
    color: #e65100;
}

.subscription-label-cancellation-scheduled,
a.subscription-label-cancellation-scheduled:link,
a.subscription-label-cancellation-scheduled:visited {
    background-color: #fce4ec;
    color: #c62828;
}

.subscription-label-inactive,
a.subscription-label-inactive:link,
a.subscription-label-inactive:visited {
    background-color: #fff3e0;
    color: #ff9800;
}

.subscription-label-terminated {
    background-color: #f0f0f0;
    color: #888;
}

.subscription-label-detail {
    font-size: 11px;
    font-weight: normal;
    text-transform: none;
}

/* Fix: Jet admin dropdowns (select2) appearing below multi-line labels.
 *
 * In Jet's float-based form layout, the label is float:left (width:160px).
 * ForeignKey fields are wrapped in a block-level <div class="related-widget-wrapper">.
 * When a label wraps to multiple lines, the float grows taller, and the select2
 * widget inside the wrapper can drop below the float if its width exceeds the
 * available space beside it.
 *
 * Setting overflow:hidden creates a Block Formatting Context (BFC) on the wrapper,
 * which forces it to position beside the float (not overlap it), constraining the
 * select2 width to the available space next to the label.
 * The select2 dropdown popup is appended to <body>, so it is not clipped.
 */
.aligned .form-row .related-widget-wrapper {
    overflow: hidden;
}

/* Same fix for select2 containers that are direct children of the form row
 * (simple ChoiceFields without a related-widget-wrapper). */
.aligned .form-row > div > .select2-container {
    max-width: calc(100% - 170px);
}