/*
 * Indeed Premium modals (Loading / Pricing / Error). They are <base-modal size="md">, which renders
 * Bootstrap's modal markup (.modal-dialog/.modal-header/.modal-body/.modal-footer) in light DOM, so
 * everything here is scoped under .indeed-premium-modal. The design is 592px wide, between
 * Bootstrap's md (500px) and lg (800px), so md is widened here.
 */

/* Until Stencil upgrades <base-modal>, its slotted title and body are plain content in the page
   flow, so all three modals show on first load. Hide them until the component has hydrated and
   renders them closed. */
base-modal.indeed-premium-modal:not(.hydrated) {
    display: none !important;
}
.indeed-premium-modal .modal-dialog {
    max-width: 592px;
}

.indeed-premium-modal .modal-content {
    border: none;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(173, 181, 189, 0.3), 0 4px 8px rgba(173, 181, 189, 0.15);
}

.indeed-premium-modal .modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid #d1dae8;
}

.indeed-premium-modal .modal-title {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    color: #272a2f;
    margin: 0;
}

.indeed-premium-modal .modal-root__close-btn i {
    font-size: 16px;
    color: #8b8e94;
}

.indeed-premium-modal .modal-body {
    padding: 24px;
}

/* Every action lives in the body per the design; base-modal always renders a footer. */
.indeed-premium-modal .modal-footer {
    display: none;
}

/* ---- Loading / Error ---- */

.indeed-premium-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 252px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
}

.indeed-premium-status__spinner {
    width: 3rem !important;
    height: 3rem !important;
    /* border-width: 2px !important; */
    color: #2f86dd;
    margin-bottom: 4px;
}

.indeed-premium-status__icon {
    font-size: 40px;
    line-height: 1;
    color: #9e0000;
}

.indeed-premium-status__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 28px;
    color: #272a2f !important;
    margin: 0;
}

.indeed-premium-status__subtitle {
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: #585b62;
    margin: 0;
}

/* ---- Pricing ---- */

.indeed-premium-pricing {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: 'Poppins', sans-serif;
}

.indeed-premium-pricing__rate,
.indeed-premium-pricing__durations {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.indeed-premium-pricing__rate {
    padding: 8px 0;
}

.indeed-premium-pricing__label {
    font-size: 16px;
    font-weight: 600;
    line-height: 28px;
    color: #272a2f;
    margin: 0;
}

.indeed-premium-pricing__rate-value {
    display: flex;
    align-items: center;
    color: #2f86dd;
}

.indeed-premium-pricing__rate-amount {
    font-size: 32px;
    font-weight: 600;
    line-height: 38.4px;
}

.indeed-premium-pricing__rate-unit {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}

.indeed-premium-pricing__duration-options {
    display: flex;
    gap: 8px;
}

.indeed-premium-duration-option {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border: 1px solid #d1dae8;
    border-radius: 8px;
    background: #fff;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
}

.indeed-premium-duration-option:hover {
    border-color: #2f86dd;
}

.indeed-premium-duration-option:focus {
    outline: none;
}

.indeed-premium-duration-option:focus-visible {
    outline: 1px dashed #2f86dd;
    outline-offset: 2px;
}

.indeed-premium-duration-option.active {
    border-color: #2f86dd;
    background: #ebf4ff;
    box-shadow: 0 0 0 3px rgba(47, 134, 221, 0.2);
}

.indeed-premium-duration-option__days {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #373737;
}

.indeed-premium-duration-option__total {
    font-size: 14px;
    font-weight: 400;
    color: #585b62;
}

.indeed-premium-pricing__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border: 1px solid #ebedf3;
    border-radius: 8px;
    background: #f4f5f9;
}

.indeed-premium-pricing__total {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.indeed-premium-pricing__total-label {
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    color: #585b62;
}

.indeed-premium-pricing__total-amount {
    font-size: 32px;
    font-weight: 600;
    line-height: 38.4px;
    color: #020305;
}

.indeed-premium-pricing__add-to-cart {
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap;
}