/* Plan Summary Card - exactly as reference image */
        .plan-summary-card {
			width: 517px;
			/* min-height: 643px; */
            background: #EFF2F6;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);
            padding: 24px;
            box-sizing: border-box;
        }

        .plan-summary-header {
			color: #3C4654;
			font-size: 20px;
			font-weight: 700;
			line-height: 30px; 
			margin-bottom: 24px;
        }

        .congrats-message {
            background: #FFF;
            border-radius: 12px;
            padding: 22px 16px;
            margin-bottom: 24px;
            display: flex;
            gap: 8px;
        }

        .congrats-icon {
			height: 135.729px;
            width: 168px;
        }

        .congrats-header-text{
            font-size: 18px;
            font-weight: 600;
            color: #3C4654;
            line-height: 27px;
            /* margin-bottom: 0.25rem; */
        }

        .congrats-highlight {
            font-size: 18px;
            font-weight: 700;
            color: #F16722;
            line-height: 27px;
        }

        .congrats-text{
			font-size: 14px;
			font-weight: 500;
			line-height: 21px;
			color:#66707D;
            margin-top: 10px;
        }
		
		.congrats-text-highlight {
			font-weight: 700;
		}

        /* plan row */
		.selected-plan-card{
			background: #FFF;
			border-radius: 12px;
            padding: 24px;
		}

        .plan-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.25rem 0;
        }

		.selected-plan-img{
			width: 96px;
			height: 64px;
		}

        .selected-plan-name {
            color: #3D9AA7;
            font-size: 36px;
			font-weight: 700;
			line-height: 54px;
        }
        /* Plan-specific colors */
       .selected-plan-name.plan-essentials {
            color: #3D9AA7;
       }

       .selected-plan-name.plan-pro {
            color: #128292;
       }

       .selected-plan-name.plan-elite {
            color: #F16722;
       }

        .selected-plan-price {
            color: #3C4654;
			font-size: 48px;
			font-weight: 700;
			line-height: 150%; /* 72px */
        }

        .selected-plan-frequency {
            color: #808894;
            font-size: 20px;
            font-weight: 400;
            margin-left: 0.25rem;
        }

		.edit-plan-link {
            background: transparent;
			color: #128292;
			padding: 0px 12px;
			font-size: 18px;
			font-weight: 600;
			border-radius: 50px;
			cursor: pointer;
			border: 0;
			width: 104px;
            height: 30px;
            align-content: center;
			margin-top: 12px;
			align-self: baseline;
            text-align: center;    
            display: inline-block;
            white-space: nowrap;  
        }

        .edit-plan-link:hover {
            background: #DFE1E4;
            /* color: #0e6b78; */
        }

		.selected-plan-info {
			font-size: 18px;
			font-weight: 600;
			line-height: 150%; /* 27px */
			color: #3C4654;

		}

		.selected-plan-info-amount {
			font-size: 18px;
			font-weight: 500;
			line-height: 150%; /* 27px */
			color: #3C4654;
		}

		.selected-plan-info-small {
			color:  #808894;
			font-size: 16px;
			font-weight: 500;
			line-height: 150%; /* 24px */
		}

        /* divider */
        .summary-divider {
            height: 1px;
            background: #BCC1C7;
            margin: 1rem 0;
        }

        /* total due & due today */
        .total-row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
			
			font-size: 18px;
			font-weight: 500;
			line-height: 150%; /* 27px */
			color: #3C4654;
        }


        .due-today-row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-top: 0.5rem;

			font-size: 20px;
			font-weight: 700;
			line-height: 150%; /* 30px */
			color: #3C4654;
        }

        .comp-tooltip-wrap {
            position: relative;
            display: inline-block;
            margin-left: 4px;
            vertical-align: middle;
        }
        
        .comp-tooltip-icon {
            cursor: pointer;
            font-size: 16px;
            color: #99A0AA;
            line-height: 1;
            margin-left: 8px;
        }
        
        .comp-tooltip-bubble {
            display: none;
            position: absolute;
            top: calc(100% + 10px);
            left: 50%;
            transform: translateX(-50%);
            width: 276px;
            padding: 0px 18px 18px 18px;
            background: #128292;
            color: #fff;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            line-height: 1.4;
            z-index: 100;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .comp-tooltip-bubble::after {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 51%;
            transform: translateX(-50%);
            border: 8px solid transparent;
            /* border-top-color: #128292; */
            border-bottom-color: #128292;
        
        }
        
        .comp-tooltip-header {
            padding: 9px 0;
            font-size: 16px;
            font-weight: 600;
        }
        
        .comp-tooltip-wrap.show .comp-tooltip-bubble {
            display: block;
        }
        
        .comp-tooltip-close {
            position: absolute;
            top: 8px;
            right: 10px;
            cursor: pointer;
            font-size: 18px;
            color: #fff;
            line-height: 1;
        }

/* --------------------------------------------------------------------------
   ATAI-75 (QA, mobile): Plan-Summary corrections to match the approved Figma.
   These live at the end of plan-selection.css — which is linked AFTER
   signup.css (and therefore after mobile-response.css) — so they win the
   cascade for the plan-summary classes at equal specificity (the earlier
   mobile overrides were being overridden by this file's base desktop rules,
   which is why the plan card rendered at desktop sizes on phones). Desktop
   (>=769px) is untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Congrats card: illustration on top, header + description centred (Figma) */
    .congrats-message {
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
        gap: 12px;
        padding: 16px;
    }
    .congrats-icon {
        width: 168px;
        max-width: 100%;
        height: auto;
    }
    .congrats-icon img { width: 100%; height: auto; }

    /* Essentials card: the desktop name/price sizes (36/48px) tower on a phone
       and make the card far taller than the design — use the Figma mobile sizes. */
    .selected-plan-name { font-size: 24px; line-height: 1.5; }
    .selected-plan-price { font-size: 30px; line-height: 1.5; }
    .selected-plan-frequency { font-size: 18px; }

    /* Keep icon / name+price / Edit-Plan on one row with Edit Plan pinned
       top-right (Figma), instead of wrapping the button below the price. */
    .selected-plan-card .plan-row:first-child {
        flex-wrap: nowrap;
        align-items: flex-start;
    }
    .plan-amount-section {
        display: flex;
        flex-direction: column;
    }
    .edit-plan-link {
        align-self: flex-start;
        margin-top: 0;
        font-size: 14px;
    }

    /* PROPS-3441: keep the plan detail label and its amount on one line with the
       amount pinned to the right (e.g. "Essentials Plan - Monthly" .... "$99.00"),
       instead of the amount wrapping to a new line on narrow phones. */
    .selected-plan-card .plan-row .selected-plan-info {
        flex: 1 1 auto;
        min-width: 0;
    }
    .selected-plan-card .plan-row .selected-plan-info-amount {
        flex: 0 0 auto;
        white-space: nowrap;
        text-align: right;
        margin-left: 12px;
    }
}