/* Figma plan comparison: labels + Pro / Standard / Lite / Labo columns. */
.plan-picker { width: 100%; margin: 0 0 8px; color: #222; }
.plan-picker__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.plan-matrix { display: grid; grid-template-columns: 130px repeat(4, minmax(130px, 1fr)); min-width: 650px; align-items: stretch; }
.plan-matrix__labels, .plan-card { display: grid; grid-template-rows: 50px 59px 59px 92px repeat(5, 57px); }
.plan-card { position: relative; margin: 0 4px; color: #222; }
.plan-picker:not(.plan-picker--account) .plan-card:not(.plan-card--disabled) { cursor: pointer; }
.plan-card__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.plan-matrix__head, .plan-matrix__price-row, .plan-matrix__action-row,
.plan-matrix__feature-label, .plan-matrix__feature-value { display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.plan-matrix__head { font-size: 17px; font-weight: 700; color: #222; }
.plan-card .plan-matrix__head { color: #fff; }
.plan-card--pro .plan-matrix__head { background: #204655; }
.plan-card--standard .plan-matrix__head { background: #40bd98; }
.plan-card--lite .plan-matrix__head { background: #c6eee3; color: #222; }
.plan-card--labo .plan-matrix__head { background: #b8d9fc; color: #222; }
.plan-card__current-badge { margin-left: 8px; padding: 3px 7px; border-radius: 12px; background: #8da7bf; color: #fff; font-size: 10px; white-space: nowrap; }
.plan-card--pro > :not(.plan-card__input):not(.plan-matrix__head) { background: #eef4f6; }
.plan-card--standard > :not(.plan-card__input):not(.plan-matrix__head) { background: #e9f8f2; }
.plan-card--lite > :not(.plan-card__input):not(.plan-matrix__head) { background: #eef9f6; }
.plan-card--labo > :not(.plan-card__input):not(.plan-matrix__head) { background: #edf6ff; }
.plan-matrix__price-row { font-size: 14px; font-weight: 700; }
.plan-matrix__labels .plan-matrix__price-row { font-weight: 400; }
.plan-matrix__action-row { align-items: flex-start; padding: 20px 8px 12px; }
.plan-matrix__feature-label { justify-content: flex-end; padding-right: 18px; font-size: 13px; font-weight: 400; }
.plan-matrix__feature-value { border-top: 1px solid rgba(255,255,255,.9); font-size: 14px; color: #b1bec4; }
.plan-matrix__feature-value .fa-circle { font-size: 11px; color: #00bd62; }
.plan-card__cta { width: 100%; max-width: 145px; padding: 9px 6px; border: 1px solid #40bd98; border-radius: 7px; background: #40bd98; color: #fff; font: inherit; font-size: 12px; font-weight: 700; text-align: center; line-height: 1.2; cursor: pointer; }
.plan-card__cta-selected { display: none; }
.plan-card--selected { outline: 2px solid #40bd98; outline-offset: -2px; }
.plan-card--selected .plan-card__cta-selected { display: inline; }
.plan-card--selected .plan-card__cta-select { display: none; }
.plan-card__cta--current { border-color: #999; background: #eee; color: #777; }
.plan-card__cta--disabled, .plan-card__cta--disabled:disabled { border-color: #888; background: #eee; color: #666; cursor: not-allowed; opacity: 1; }
.plan-card__disabled-action, .plan-card__current-actions { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 5px; }
.plan-card__disabled-action small { color: #333; font-size: 11px; white-space: nowrap; }
.plan-card__cancel { border: 0; padding: 0; background: transparent; color: #222; font-size: 12px; font-weight: 400; text-decoration: underline; cursor: pointer; }
.plan-picker__cancel-action { display: flex; justify-content: flex-end; margin: 8px 4px 0; }
.plan-picker__cancel-action .plan-card__cancel { font-size: 14px; }
.plan-picker__tax-note, .plan-picker__footnote { margin: 12px 0 0 !important; color: #333 !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.7 !important; letter-spacing: 0 !important; }
.plan-picker__footnote { margin-top: 0 !important; }

#planPaymentModal .modal-dialog { max-width: 1040px; }
#planPaymentModal .modal-content { padding: 0; border: 0; border-radius: 14px; }
#planPaymentModal .modal-body { padding: 0; }
#planPaymentModal, #planPaymentModal * { font-size: 14px !important; }
#selected_plan_name, #selected_plan_today_fee { font-size: 20px !important; }
.plan-payment-modal__header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 28px 36px 24px; }
.plan-payment-modal__header h2 { margin: 0; color: #222; font-size: 21px; font-weight: 700; }
.plan-payment-modal__header-action { border: 0; padding: 0; background: transparent; color: #40bd98; font-size: 19px; font-weight: 700; cursor: pointer; }
.plan-payment-modal__header-action:first-child { justify-self: start; }
.plan-payment-modal__header-action:last-child { justify-self: end; }
.plan-payment-modal__body { display: grid; grid-template-columns: minmax(360px, .95fr) minmax(400px, 1.05fr); gap: 24px; padding: 4px 36px 36px; }
.plan-payment-summary { align-self: start; padding: 30px 24px 18px; border: 1px solid #ddd; border-radius: 12px; font-size: 18px; }
.plan-payment-summary__row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 25px; }
.plan-payment-summary__row strong { font-size: 20px; white-space: nowrap; }
.plan-payment-summary__plan strong { color: #40bd98; font-size: 28px; }
.plan-payment-summary__divider { height: 1px; margin: -3px 0 24px; background: #e2e2e2; }
.plan-payment-summary__today { margin-bottom: 22px; font-weight: 700; }
.plan-payment-summary__today strong { font-size: 27px; }
.plan-payment-summary__today small { font-size: 15px; }
.plan-payment-summary p { margin: 0; font-size: 17px; }
.plan-payment-summary__delayed-fee { margin-top: 14px !important; line-height: 1.8; }
.plan-payment-summary__row:not(.plan-payment-summary__plan):not(.plan-payment-summary__today) > span,
.plan-payment-summary p,
.plan-payment-field label { font-weight: 400 !important; }
.plan-payment-summary__delayed-fee strong { font-weight: 700; }
.plan-payment-fields { min-width: 0; }
.plan-payment-field { margin-bottom: 20px; }
.plan-payment-field label { display: block; margin-bottom: 7px; color: #222; font-size: 18px; }
.plan-payment-field input, .plan-payment-field select, .plan-payment-card-input { width: 100%; height: 58px; box-sizing: border-box; border: 1px solid #aebac3; border-radius: 11px; background: #fff; color: #222; font-size: 19px; }
.plan-payment-field input { padding: 0 22px; }
.plan-payment-field input::placeholder { color: #bdc6cc; }
.plan-payment-field select { appearance: none; padding: 0 52px 0 20px; }
.plan-payment-select-wrap { position: relative; }
.plan-payment-select-wrap::after { position: absolute; top: 20px; right: 25px; width: 12px; height: 12px; border-right: 2px solid #40bd98; border-bottom: 2px solid #40bd98; content: ''; transform: rotate(45deg); pointer-events: none; }
.plan-payment-card-input { padding: 18px 22px; }
.plan-payment-card-input--fallback { padding: 0 22px; }
.plan-payment-fields__split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.plan-payment-modal .errorlist { margin: 4px 0 0; padding-left: 20px; }

@media (max-width: 768px) {
    .plan-matrix { grid-template-columns: 110px repeat(4, 145px); min-width: 690px; }
    .plan-matrix__labels, .plan-card { grid-template-rows: 46px 54px 54px 84px repeat(5, 52px); }
    .plan-card { margin: 0 2px; }
    .plan-matrix__feature-label { padding-right: 10px; font-size: 12px; }
    .plan-card__cta { font-size: 11px; }
    #planPaymentModal .modal-dialog { margin: 10px; }
    .plan-payment-modal__header { padding: 22px 18px 18px; }
    .plan-payment-modal__header h2 { font-size: 17px; }
    .plan-payment-modal__header-action { font-size: 15px; }
    .plan-payment-modal__body { grid-template-columns: 1fr; padding: 4px 18px 24px; }
    .plan-payment-summary { padding: 22px 18px 16px; }
    .plan-payment-fields__split { gap: 12px; }
}