/* ================================================================
   PCD Grid – Product Card Grid Layout
   Matches Wildanet Elementor card design (template 15638)
   ================================================================ */

/* ── Brand Tokens (match Elementor global colors) ── */
:root {
    --pcd-color-text:       #123549;
    --pcd-color-bg:         #EDF6F9;
    --pcd-color-border:     rgba(18, 53, 73, 0.38); /* #12354961 */
    --pcd-color-accent:     #48A9A6;
    --pcd-color-purple:     #825891;
    --pcd-color-badge:      #F2D615;
    --pcd-color-navy:       #123549;
    --pcd-color-muted:      #5E6468;
    --pcd-color-feature-bg: #EDF6F9;
    --pcd-font:             "Work Sans", sans-serif;
}

/* ── Tab Switcher ── */
.pcd-tab-container {
    text-align: center;
    margin: 30px auto 10px;
    padding: 0 20px;
}

.pcd-tab-desc {
    font-family: var(--pcd-font);
    font-size: 18px;
    color: var(--pcd-color-navy);
    margin: 20px auto 0;
    max-width: 600px;
    line-height: 1.5;
    font-weight: 500;
    transition: opacity 0.2s;
    min-height: 40px;
    text-align: center;
}

.pcd-tab-cta {
    font-family: var(--pcd-font);
    font-size: 18px;
    font-weight: 600;
    color: var(--pcd-color-text);
    margin: 0 0 16px 0;
}

.pcd-tab-switcher {
    display: inline-flex;
    background: #f4f8f9;
    border: 1px solid #dcdfe5;
    border-radius: 40px;
    padding: 6px;
    position: relative;
    max-width: 100%;
    box-shadow: inset 0 2px 4px rgba(26,43,72,0.06);
}

.pcd-tab-slider {
    position: absolute;
    top: 6px;
    left: 0;
    height: calc(100% - 12px);
    background: var(--pcd-color-purple);
    border-radius: 34px;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 12px rgba(130, 88, 145, 0.3);
    z-index: 1;
}

.pcd-tab-btn {
    background: transparent !important;
    border: none;
    color: #6a7c87;
    padding: 10px 32px;
    border-radius: 34px;
    font-family: var(--pcd-font);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.3s ease;
    outline: none;
    position: relative;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none !important;
}

.pcd-tab-btn:hover, 
.pcd-tab-btn:focus, 
.pcd-tab-btn:active {
    color: #4a5c67;
    background: transparent !important;
    outline: none;
    box-shadow: none !important;
}

.pcd-tab-btn.active, 
.pcd-tab-btn.active:hover, 
.pcd-tab-btn.active:focus, 
.pcd-tab-btn.active:active {
    color: #fff;
    font-weight: 600;
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
}

.pcd-grid-card[data-pcd-tab] {
    display: none; /* Hidden by default until JS initializes */
}

.pcd-tab-info-icon:hover .pcd-tab-info-tooltip {
    visibility: visible !important;
    opacity: 1 !important;
}

/* ── Grid Layout ── */
.pcd-grid {
    display: grid;
    grid-template-columns: repeat(var(--pcd-cols, 3), 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px 40px;  /* extra top padding for badges that extend above cards */
}

/* ── Card ── */
.pcd-grid-card {
    position: relative;
    display: flex;
}

.pcd-grid-card-inner {
    background: var(--pcd-color-bg);
    border: 2px solid var(--pcd-color-border);
    border-radius: 20px;
    padding: 25px 20px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.pcd-grid-card:hover .pcd-grid-card-inner {
    transform: translateY(-8px);
    box-shadow: 0 16px 32px rgba(18, 53, 73, 0.1);
    border-color: var(--pcd-color-accent);
}

/* ── Badge (pill style centered at top border) ── */
.pcd-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--pcd-color-badge);
    color: var(--pcd-color-text);
    padding: 8px 24px;
    border-radius: 35px;
    font-family: var(--pcd-font);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    z-index: 2;
}

/* ── Title ── */
.pcd-grid-title {
    font-family: var(--pcd-font);
    font-size: 22px;
    font-weight: 700;
    font-style: normal;
    color: var(--pcd-color-purple) !important;
    margin: 0 0 8px;
    line-height: 1.2;
}

/* ── Price ── */
.pcd-grid-price {
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 4px;
}

.pcd-grid-price-amount {
    font-family: var(--pcd-font);
    font-size: 65px;
    font-weight: 700;
    color: var(--pcd-color-accent);
    line-height: 1;
    display: inline-block;
    letter-spacing: -1.5px;
}

.pcd-grid-price-suffix {
    font-family: var(--pcd-font);
    font-size: 24px;
    color: var(--pcd-color-accent);
    font-weight: 600;
    display: inline-block;
    margin-top: 0;
}

/* ── Speed Section ── */
.pcd-grid-speeds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 16px;
    padding: 0 5px;
}

.pcd-speed-col {
    text-align: center;
}

.pcd-speed-icon {
    color: var(--pcd-color-navy);
    margin-bottom: 2px;
    display: flex;
    justify-content: center;
}

.pcd-speed-label {
    font-family: var(--pcd-font);
    font-size: 12px;
    color: var(--pcd-color-text);
    font-weight: 400;
    margin-bottom: 4px;
}

.pcd-speed-old {
    font-family: var(--pcd-font);
    font-size: 16px;
    color: var(--pcd-color-muted);
    font-weight: 400;
    margin-bottom: 2px;
}

.pcd-speed-new {
    font-family: var(--pcd-font);
    font-size: 25px;
    font-weight: 600;
    color: var(--pcd-color-navy);
    line-height: 1.2;
}

.pcd-speed-unit {
    font-size: 16px;
    font-weight: 400;
    margin-left: 3px;
}

.pcd-speed-struck {
    text-decoration: line-through;
    text-decoration-color: #c77dba;
    text-decoration-thickness: 2px;
}

/* ── Features ── */
.pcd-grid-features {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: center;
    margin-bottom: 10px;
}

.pcd-feature {
    font-family: var(--pcd-font);
    font-size: 15px;
    color: var(--pcd-color-text);
    font-weight: 600;
    padding: 0;
    margin: 0 0 -3px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.pcd-feature-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pcd-color-text);
}

.pcd-feature-icon svg {
    width: 100%;
    height: 100%;
}

/* ── Button ── */
.pcd-grid-button {
    margin-top: auto;
    padding: 10px 0;
}

.pcd-grid-btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 35px;
    font-family: var(--pcd-font);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none !important;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    background-color: var(--pcd-color-accent);
    color: #ffffff !important;
    text-shadow: 0 0 0 rgba(0,0,0,0.3);
}

.pcd-grid-btn:hover {
    background-color: var(--pcd-color-navy) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* In-cart state */
.pcd-grid-card.pcd-in-cart .pcd-grid-btn,
a.pcd-grid-btn.pcd-remove-from-cart,
a.pcd-grid-btn.pcd-remove-from-cart:link,
a.pcd-grid-btn.pcd-remove-from-cart:visited {
    background-color: var(--pcd-color-purple) !important;
    color: #ffffff !important;
    border: 2px solid var(--pcd-color-purple) !important;
}

a.pcd-grid-btn.pcd-remove-from-cart:hover {
    background-color: #6f4d85 !important;
    border-color: #6f4d85 !important;
}

.pcd-grid-card.pcd-in-cart .pcd-grid-card-inner {
    border-color: var(--pcd-color-purple);
}

/* Hide WooCommerce View Basket link globally */
a.added_to_cart, .added_to_cart {
    display: none !important;
}

/* ── Price Increase Notice ── */
.pcd-grid-price-increase {
    font-family: var(--pcd-font);
    font-size: 11px;
    color: var(--pcd-color-muted);
    margin-top: 8px;
    line-height: 16px;
    padding: 0 15px;
    font-weight: 400;
}

/* ── Description ── */
.pcd-grid-description {
    font-family: var(--pcd-font) !important;
    font-size: 14px;
    color: #4a5568;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 8px;
    min-height: calc(14px * 1.5 * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ================================================================
   Responsive
   ================================================================ */

@media (max-width: 1024px) {
    .pcd-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 30px 15px;
    }
    .pcd-grid-card-inner {
        padding: 25px 15px 14px;
    }
    .pcd-badge {
        font-size: 13px;
        padding: 6px 18px;
    }
}

@media (max-width: 600px) {
    .pcd-grid {
        grid-template-columns: 1fr;
        padding: 30px 16px 20px;
    }
    .pcd-grid-card-inner {
        padding: 25px 15px 14px;
    }
    .pcd-tab-desc {
        font-size: 15px;
        min-height: auto;
    }
}

/* ── Sale Price / "Usually" display ── */
.pcd-grid-regular-price {
    font-family: var(--pcd-font);
    font-size: 14px;
    color: var(--pcd-color-muted);
    text-align: center;
    margin-bottom: 4px;
}

/* ── Price subtitle ("when bought with Phone*") ── */
.pcd-grid-price-subtitle {
    font-family: var(--pcd-font);
    font-size: 13px;
    color: var(--pcd-color-muted);
    text-align: center;
    margin-top: 4px;
    margin-bottom: 12px;
}