/* =============================================
   CARTANTS — service-product.css
   WooCommerce-connected product/package page
   ============================================= */

.sp-page {
    display: flex; flex-direction: column;
    align-items: center; gap: 0;
    width: 100%;
    padding-top: 80px; /* header height offset */
}

/* Empty state */
.sp-empty {
    padding: 120px 24px; text-align: center;
    font-family: 'Montserrat', sans-serif;
}
.sp-empty h1 { font-size: 26px; color: #2D335D; margin: 0 0 12px; }
.sp-empty p  { color: #6B7280; margin: 0 0 20px; }
.sp-empty__btn {
    display: inline-block; padding: 12px 28px;
    background: linear-gradient(107.49deg, #7661B4 7.25%, #0D23AC 95.34%);
    color: #fff !important; border-radius: 24px;
    text-decoration: none; font-weight: 700;
}

/* ════ PRODUCT CARD ════════════════════════════════
   Figma: 1240px, border #D8DDFC, shadow, radius 32
   ═══════════════════════════════════════════════ */
.sp-product-card {
    box-sizing: border-box;
    display: flex; flex-direction: row;
    align-items: stretch; gap: 0;
    padding: 20px; gap: 24px;
    width: 100%; max-width: 1240px;
    margin: 64px auto 0;
    background: rgba(251,251,253,0.5);
    border: 1px solid #D8DDFC;
    box-shadow: 0 0 9px rgba(118,97,180,0.1);
    border-radius: 24px;
}

/* Left: image — Figma: 591px */
.sp-product-card__image {
    flex: 0 0 46%; max-width: 540px;
    border-radius: 14px; overflow: hidden;
    background: #F3F4FE;
}
.sp-product-card__image img {
    width: 100%; height: 100%; min-height: 400px;
    object-fit: cover; display: block;
}

/* Right: details */
.sp-product-card__details {
    flex: 1; display: flex; flex-direction: column;
    gap: 14px; padding: 8px 8px 0;
}

/* Most Popular badge — Figma: bg #FFC300 radius 32 */
.sp-badge-popular {
    display: inline-flex; align-items: center;
    padding: 6px 14px;
    background: #FFC300; border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; font-size: 12px; color: #2D335D;
    width: fit-content;
}

/* Figma: h4 31px → 22px */
.sp-product-card__name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; font-size: 22px;
    line-height: 30px; color: #2D335D; margin: 0;
}
.sp-product-card__short-desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; font-size: 13px;
    line-height: 20px; color: #2D335D; margin: 0;
    max-width: 400px;
}

/* Chips — Figma: bg #D8DDFC border #EEEFF6 radius 32 */
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-chip {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 16px;
    background: #D8DDFC; border: 1px solid #EEEFF6;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500; font-size: 12px; color: #3A4278;
}

/* What's included */
.sp-features { display: flex; flex-direction: column; gap: 10px; }
.sp-features__label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; font-size: 13px; color: #2D335D; margin: 0;
}
.sp-features__list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.sp-features__list li {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; font-size: 13px; color: #3A4278;
}

/* Quantity + Add to Cart row */
.sp-purchase-row {
    display: flex; flex-direction: row;
    align-items: center; gap: 12px; flex-wrap: wrap;
}

/* Qty — Figma: radius 32, row */
.sp-qty {
    display: flex; align-items: center; gap: 0;
    border: 1.5px solid #EEEFF6; border-radius: 24px;
    overflow: hidden; height: 44px;
}
.sp-qty__btn {
    width: 44px; height: 44px; background: none; border: none;
    font-size: 20px; color: #3A4278; cursor: pointer;
    transition: background 0.15s; flex-shrink: 0;
}
.sp-qty__btn:hover { background: rgba(118,97,180,0.08); }
.sp-qty__num {
    min-width: 32px; text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; font-size: 14px; color: #2D335D;
    padding: 0 8px;
}

/* Add to Cart — Figma: border #515DA9 radius 24 */
.sp-btn-cart {
    display: flex; justify-content: center; align-items: center;
    padding: 12px 24px; height: 44px; flex: 1; min-width: 160px;
    border: 1.5px solid #515DA9; border-radius: 22px;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; font-size: 13px; color: #515DA9;
    cursor: pointer; transition: background 0.15s, color 0.15s;
}
.sp-btn-cart:hover { background: #515DA9; color: #ffffff; }

/* Price */
.sp-price-row { display: flex; align-items: baseline; gap: 6px; }
.sp-price {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800; font-size: 28px; color: #2D335D;
}
.sp-price__period {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px; color: #9CA3AF;
}

/* Checkout Now — Figma: gradient, full width, radius 24 */
.sp-btn-checkout {
    display: flex; justify-content: center; align-items: center;
    width: 100%; height: 52px;
    background: linear-gradient(107.49deg, #7661B4 7.25%, #0D23AC 95.34%);
    border: none; border-radius: 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; font-size: 15px; color: #ffffff;
    cursor: pointer; transition: opacity 0.15s, transform 0.15s;
}
.sp-btn-checkout:hover { opacity: 0.9; transform: translateY(-1px); }

/* Cart message */
.sp-cart-msg {
    padding: 8px 14px; border-radius: 10px;
    font-family: 'Montserrat', sans-serif; font-size: 12px;
}
.sp-cart-msg--success { background: rgba(22,163,74,0.08); border: 1px solid rgba(22,163,74,0.25); color: #15803D; }
.sp-cart-msg--error   { background: rgba(239,68,68,0.08);  border: 1px solid rgba(239,68,68,0.2);  color: #B91C1C; }

/* ════ DESCRIPTION ════════════════════════════════
   Figma: bg rgba(251,251,253,0.5) radius 32
   ═══════════════════════════════════════════════ */
.sp-description {
    box-sizing: border-box;
    display: flex; flex-direction: column; gap: 16px;
    padding: 32px;
    width: 100%; max-width: 1240px; margin: 32px auto 0;
    background: rgba(251,251,253,0.5);
    border-radius: 20px;
    border: 1px solid #EEEFF6;
}
/* Figma: h3 39px → 24px */
.sp-description__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; font-size: 24px;
    line-height: 32px; color: #2D335D; margin: 0;
}
.sp-description__body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500; font-size: 14px;
    line-height: 22px; color: #3A4278;
}
.sp-description__body ul { padding-left: 18px; margin: 8px 0; }
.sp-description__body li { margin-bottom: 4px; }
.sp-description__body strong { font-weight: 700; color: #2D335D; }

/* ════ REVIEWS SCROLLER ══════════════════════════ */
.sp-reviews {
    display: flex; flex-direction: column; gap: 20px;
    padding: 48px 0;
    width: 100%; max-width: 1240px; margin: 0 auto;
}
/* Figma: → 24px */
.sp-reviews__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; font-size: 24px;
    color: #2D335D; margin: 0;
}
.sp-reviews__scroller-wrap {
    position: relative; display: flex; align-items: center; gap: 16px;
}
.sp-reviews__outer {
    flex: 1; overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}
.sp-reviews__track {
    display: flex; gap: 24px;
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
    padding: 8px 2px;
}

/* Arrow */
.sp-arrow {
    width: 44px; height: 44px; border-radius: 50%;
    background: #ffffff; border: 1.5px solid #EEEFF6;
    box-shadow: 0 4px 12px rgba(13,35,172,0.08);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    transition: background 0.15s, opacity 0.2s;
}
.sp-arrow:hover { background: #F8F9FF; }

/* Dots */
.sp-reviews__dots { display: flex; gap: 8px; justify-content: center; }
.sp-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #C9CDE4; border: none; cursor: pointer;
    transition: all 0.2s;
}
.sp-dot.is-active {
    background: linear-gradient(107.49deg, #7661B4 7.25%, #0D23AC 95.34%);
    width: 22px; border-radius: 4px;
}

/* Review card — Figma: rgba(254,254,254,0.25) border #C9CDE4 radius 32 */
.sp-review-card {
    box-sizing: border-box;
    display: flex; flex-direction: column;
    justify-content: space-between;
    padding: 20px; gap: 14px;
    min-width: calc(33.333% - 16px);
    max-width: calc(33.333% - 16px);
    background: rgba(254,254,254,0.7);
    border: 1px solid #C9CDE4;
    border-radius: 20px; flex-shrink: 0;
    transition: transform 0.2s, box-shadow 0.2s;
}
.sp-review-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(13,35,172,0.08); }
.sp-review-card__text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; font-size: 13px;
    line-height: 20px; color: #141414; margin: 0;
    flex: 1;
}
.sp-review-card__footer { display: flex; align-items: center; gap: 12px; }
.sp-review-card__avatar {
    width: 44px; height: 44px; border-radius: 50%;
    overflow: hidden; flex-shrink: 0; background: #B2ADD2;
}
.sp-review-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sp-review-card__ph {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, #7661B4, #0D23AC);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-size: 16px; color: #fff;
}
.sp-review-card__meta { display: flex; flex-direction: column; gap: 2px; }
.sp-review-card__name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; font-size: 13px; color: #3A4278; display: block;
}
.sp-review-card__role {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px; color: #9CA3AF; display: block;
}
.sp-review-card__stars { display: flex; gap: 3px; margin-top: 2px; }

/* ════ CAN'T DECIDE ════════════════════════════════
   Figma: padding 128px 100px, pastel gradient bg
   ═══════════════════════════════════════════════ */
.sp-undecided {
    display: flex; flex-direction: row;
    align-items: flex-start; gap: 64px;
    padding: 80px 100px;
    width: 100%; box-sizing: border-box;
    background: linear-gradient(107.49deg,
        rgba(174,215,235,0.16) 7.25%,
        rgba(197,152,227,0.16) 51.3%,
        rgba(146,173,230,0.16) 73.32%,
        rgba(136,141,232,0.16) 95.34%
    );
}
.sp-undecided__text {
    flex: 1; display: flex; flex-direction: column; gap: 14px;
    min-width: 280px; max-width: 480px;
}
/* Figma: h2 49px → 28px */
.sp-undecided__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; font-size: 28px;
    line-height: 36px; color: #2D335D; margin: 0;
}
/* Figma: h6 20px → 13px */
.sp-undecided__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; font-size: 13px;
    line-height: 21px; color: #666668; margin: 0;
}

/* Expert box */
.sp-undecided__action { flex: 1; max-width: 440px; }
.sp-expert-box {
    box-sizing: border-box;
    display: flex; flex-direction: column; gap: 12px;
    padding: 24px;
    background: rgba(238,239,246,0.7);
    border: 1px solid #D8DDFC;
    border-radius: 20px;
}
.sp-expert-box__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; font-size: 16px; color: #2D335D; margin: 0;
}
.sp-expert-box__desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px; line-height: 18px; color: #6B7280; margin: 0;
}
.sp-expert-box__loggedin {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px; color: #3A4278;
    padding: 6px 12px; background: rgba(255,255,255,0.6);
    border: 1px solid #DCDCE2; border-radius: 10px;
}
.sp-expert-box__input {
    width: 100%; height: 42px; padding: 10px 14px;
    background: rgba(249,249,252,0.6); border: 1px solid #DCDCE2;
    border-radius: 14px; font-family: 'Montserrat', sans-serif;
    font-size: 13px; color: #222747; outline: none;
    box-sizing: border-box; transition: border-color 0.15s;
}
.sp-expert-box__input:focus { border-color: #7661B4; background: #fff; }
.sp-expert-box__input::placeholder { color: #9CA3AF; }
.sp-expert-box__btn {
    width: 100%; height: 50px;
    background: linear-gradient(107.49deg, #7661B4 7.25%, #0D23AC 95.34%);
    border: none; border-radius: 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; font-size: 14px; color: #ffffff;
    cursor: pointer; transition: opacity 0.15s, transform 0.15s;
}
.sp-expert-box__btn:hover { opacity: 0.9; transform: translateY(-1px); }
.sp-expert-msg {
    padding: 8px 12px; border-radius: 10px;
    font-family: 'Montserrat', sans-serif; font-size: 12px;
}
.sp-expert-msg--success { background: rgba(22,163,74,0.08); border: 1px solid rgba(22,163,74,0.2); color: #15803D; }
.sp-expert-msg--error   { background: rgba(239,68,68,0.08);  border: 1px solid rgba(239,68,68,0.2);  color: #B91C1C; }

/* Responsive */
@media(max-width:1280px){ .sp-product-card,.sp-description,.sp-reviews { margin-left:60px; margin-right:60px; max-width:none; } .sp-undecided { padding-left:60px; padding-right:60px; } }
@media(max-width:1024px){
    .sp-product-card { flex-direction: column; }
    .sp-product-card__image { max-width: 100%; height: 320px; }
    .sp-review-card { min-width: calc(50% - 12px); max-width: calc(50% - 12px); }
    .sp-undecided { flex-direction: column; gap: 32px; padding: 60px 40px; }
    .sp-undecided__text,.sp-undecided__action { max-width: 100%; }
}
@media(max-width:768px){
    .sp-product-card,.sp-description,.sp-reviews { margin-left:24px; margin-right:24px; }
    .sp-undecided { padding: 48px 24px; }
    .sp-review-card { min-width: calc(100% - 4px); max-width: calc(100% - 4px); }
    .sp-purchase-row { flex-direction: column; align-items: stretch; }
    .sp-qty { justify-content: center; }
}