/* Site-specific CSS overrides */

/* Fix price formatting - remove the automatic "/" before duration */
.price-duration:before {
    content: "" !important;
    padding-right: 0 !important;
}

/* Additional specificity for pricing components */
.pricing .price-duration:before,
.panel.pricing .price-duration:before {
    content: "" !important;
    padding-right: 0 !important;
}

/* Pricing box padding and vertical centering */
.pricing-wrapper .panel.pricing.box {
    padding-top: 3rem;
}

/* Center the pricing row so popular box overhangs equally top and bottom.
   Override theme's margin-top:-1rem which shifts popular upward after centering. */
.pricing-wrapper > .row {
    align-items: center;
}

.pricing-wrapper .popular .panel.pricing.box {
    margin-top: 0;
    padding-top: 4.5rem;
    padding-bottom: 3rem;
}

/* Distribute vertical space to text, not below the button */
.pricing-wrapper .panel-heading {
    padding-bottom: 0;
}

.pricing-wrapper .panel.pricing .panel-footer {
    padding-top: 0.5rem;
    padding-bottom: 0;
}

/* Non-popular box: also tighten bottom */
.pricing-wrapper .panel.pricing.box {
    padding-bottom: 1.5rem;
}

/* Per-die cost is now the hero number */
.pricing-wrapper .price-hero {
    font-size: 2.4rem;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
    margin-top: 0.75rem;
    margin-bottom: 0.4rem;
}

.pricing-wrapper .price-hero .price-hero-currency {
    font-size: 0.7em;
    font-weight: 400;
    vertical-align: baseline;
}

.pricing-wrapper .price-hero .price-hero-unit {
    font-size: 0.45em;
    font-weight: 400;
    color: #888;
}

/* Total cost is the secondary number (~75% of hero) */
.pricing-wrapper .price-total {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 0.6rem;
}

/* Panel title breathing room */
.pricing-wrapper .panel-title {
    margin-bottom: 0.25rem;
}

/* Countdown text inside pricing boxes */
.pricing-deadline {
    font-size: 0.8rem;
    color: #888;
    margin-top: 0.75rem;
    margin-bottom: 0;
    line-height: 1.4;
}

.pricing-deadline .countdown-inline {
    font-weight: 600;
    color: #3f78e0;
}

/* Make header text in middle column slightly larger */
.pricing-wrapper .popular h4.panel-title {
    font-size: 1.3rem !important;
}

/* Fix FAQ accordion text alignment when wrapping */
.accordion-wrapper .card-header button {
    padding-left: 1.5rem !important;
    text-indent: -1.5rem !important;
}

.accordion-wrapper .card-header button:before {
    display: inline-block !important;
    width: 1.5rem !important;
    text-indent: 0 !important;
}

/* Timeline table styling */
.timeline-row {
    transition: background-color 0.2s ease;
}

.timeline-row:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.timeline-critical td:first-child {
    color: #dc3545;
    font-weight: 700;
}

.timeline-milestone td:first-child {
    color: #28a745;
    font-weight: 600;
}

.timeline-delivery td:first-child {
    color: #007bff;
    font-weight: 600;
}

.table thead th {
    border-bottom: 2px solid #dee2e6;
    background-color: rgba(0, 0, 0, 0.02);
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

/* Fix hash link scrolling to account for fixed navigation bar */
/* Adds scroll margin to provider boxes so they don't get hidden under the header */
.box.bg-white.shadow.mb-30[id] {
    scroll-margin-top: 100px;
}

/* Slot pricing sections — anchor scroll offset */
[id^="slot-"] {
    scroll-margin-top: 80px;
}

/* Early bird / normal pricing transition */
.pricing-wrapper [class*="col-"] {
    transition: all 0.3s ease;
}

/* Slot images fill the full card width by bleeding into box padding */
.pricing.panel.box {
    overflow: hidden;
}

.slot-image-wrapper {
    height: 180px;
    overflow: hidden;
    margin: -3rem -2rem 15px -2rem;
}

/* Popular box: bleed image to top edge */
.popular .slot-image-wrapper {
    margin-top: -4.5rem;
}

.slot-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Slot badge styling */
.slot-badge {
    display: inline-block;
    background: #f0ad4e;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2em 0.6em;
    border-radius: 3px;
    margin-left: 0.5em;
    vertical-align: middle;
    text-transform: uppercase;
}

/* Ensure table-responsive works everywhere */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Light-mode tables (slot-comparison-table, etc.) ── */
.slot-comparison-table thead th,
.light-wrapper .table-striped thead th {
    background-color: #f0f2f5;
    border-bottom: 2px solid #dee2e6;
    color: #333;
}

.slot-comparison-table tbody tr:nth-child(odd),
.light-wrapper .table-striped tbody tr:nth-child(odd) {
    background-color: #f8f9fa;
}

.slot-comparison-table tbody tr:nth-child(even),
.light-wrapper .table-striped tbody tr:nth-child(even) {
    background-color: #fff;
}

.slot-comparison-table tbody tr:hover,
.light-wrapper .table-striped tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.05);
}

/* Column striping for slot columns */
.slot-comparison-table td:nth-child(even),
.slot-comparison-table th:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

/* ── Dark-mode tables ── */
.ws-table-dark,
.ws-table-dark td,
.ws-table-dark th,
.dark-wrapper .table,
.dark-wrapper .table td,
.dark-wrapper .table th {
    color: rgba(255, 255, 255, 0.9);
}

.ws-table-dark thead th,
.dark-wrapper .table thead th {
    background-color: rgba(255, 255, 255, 0.1);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.ws-table-dark tbody tr:nth-child(odd),
.dark-wrapper .table-striped tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.04);
}

.ws-table-dark tbody tr:nth-child(even),
.dark-wrapper .table-striped tbody tr:nth-child(even) {
    background-color: transparent;
}

.ws-table-dark tbody tr:hover,
.dark-wrapper .table-striped tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Column striping on dark tables */
.ws-table-dark td:nth-child(even),
.ws-table-dark th:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Logic gate SVG icons inside icon-blob containers.
   SVGs are replaced elements that don't work with table-cell centering.
   Constrain the blob container and absolutely-position the SVG inside. */
.icon-blob:has(.gate-icon) {
    max-width: 4rem;
    max-height: 4rem;
    overflow: visible;
}

.icon-blob .gate-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2rem;
    height: 2rem;
    z-index: 1;
}

/* Density cards use .box.bg-white with theme classes — no custom CSS needed */

/* Run 1 showcase carousel cards */
.grid-view .box .post-content .post-title {
    font-size: 1rem;
}

.grid-view .box .post-content .post-title a {
    color: #333;
    text-decoration: none;
}

.grid-view .box .post-content .post-title a:hover {
    color: #3f78e0;
}

/* Carousel card title contrast for dark mode (not gray-wrapper — it's light) */
.inverse-text .grid-view .box .post-content .post-title a,
.dark-wrapper .grid-view .box .post-content .post-title a {
    color: #e0e0e0;
}

.inverse-text .grid-view .box .post-content .post-title a:hover,
.dark-wrapper .grid-view .box .post-content .post-title a:hover {
    color: #5fa8ff;
}

/* Carousel card description text in dark mode */
.dark-wrapper .grid-view .box .post-content .mb-10 {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ── Current (popular) pricing option: prominent ── */
.pricing-wrapper .early-bird-panel.popular .pricing.panel.box {
    border: 3px solid #3f78e0;
    box-shadow: 0 0 30px rgba(63, 120, 224, 0.25);
}

.pricing-wrapper .normal-panel.popular .pricing.panel.box {
    border: 3px solid #28a745;
    box-shadow: 0 0 30px rgba(40, 167, 69, 0.25);
}

/* ── Future (non-popular) pricing option: de-emphasised ── */
.pricing-wrapper [class*="col-"]:not(.popular) .pricing.panel.box {
    background-color: #f5f5f5;
    filter: saturate(0.4);
    opacity: 0.85;
}

/* Dark wrapper variant */
.dark-wrapper .pricing-wrapper [class*="col-"]:not(.popular) .pricing.panel.box,
.inverse-text .pricing-wrapper [class*="col-"]:not(.popular) .pricing.panel.box {
    background-color: rgba(255, 255, 255, 0.88);
}

/* Carousel navigation arrows */
.carousel-nav-btn {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.carousel-nav-btn:hover {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.carousel-prev { left: -22px; }
.carousel-next { right: -22px; }

@media (max-width: 991px) {
    .carousel-prev { left: -10px; }
    .carousel-next { right: -10px; }
}

@media (max-width: 575px) {
    .carousel-nav-btn { display: none; }
}

/* Gradient placeholders are applied inline via Liquid forloop.index
   to avoid nth-child issues with owl-carousel item cloning */

/* ── Add-on product cards ── */
.addon-card {
    padding: 1.5rem !important;
    text-align: left;
}

.addon-image-wrapper {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.addon-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.addon-badge {
    display: inline-block;
    background: var(--color-orange, #fb9d7e);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15em 0.6em;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.addon-price {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

/* CTA section */
.cta-section .btn-lg {
    padding: 0.8rem 2.5rem;
    font-size: 1.1rem;
}

/* ── News listing grid: equal card heights ── */
/* Constrain hero image thumbnails to consistent aspect ratio */
.blog.grid .post figure.main {
    height: 200px;
    overflow: hidden;
}

.blog.grid .post figure.main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ensure isotope grid items stretch to equal row height */
.blog.grid .item.post {
    display: flex;
    flex-direction: column;
}

.blog.grid .item.post > .box {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog.grid .item.post .post-content {
    flex: 1;
}

/* ── News listing: prevent author byline from wrapping mid-phrase ── */
.blog.grid .meta .author {
    white-space: nowrap;
}

/* Footnote styling for tables */
.table-footnote {
    font-size: 0.8rem;
    color: #888;
    margin-top: 1rem;
    line-height: 1.6;
}

.dark-wrapper .table-footnote {
    color: rgba(255, 255, 255, 0.6);
}

/* Shuttle status page (/status.html) --------------------------------------- */
/* Colors lean on the theme's palette variables (defined in the theme's
   plugins.css :root block) so the page follows any future palette change. */

.ws-shuttle-card {
    height: 100%;
    padding: 1.5rem 1.5rem 1rem;
    border: 1px solid rgba(var(--rgb-gray), 0.25);
    border-radius: 0.5rem;
    background: var(--color-white);
    box-shadow: 0 0.25rem 0.75rem rgba(var(--rgb-black), 0.05);
}

.ws-shuttle-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1.25rem;
}

/* nowrap + flex-wrap on the header keeps the run name on one line and
   drops the badge underneath when the card is too narrow for both. */
.ws-shuttle-name {
    font-size: 1.15rem;
    margin: 0;
    white-space: nowrap;
}

.ws-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-white);
}

.ws-badge--delivered { background: var(--color-green); }
.ws-badge--flight    { background: var(--color-purple); }
.ws-badge--boarding  { background: var(--color-blue); }
.ws-badge--soon      { background: var(--color-gray); }

/* The route: a vertical rail of stops. Dots sit in a 28px column; the
   connector segment entering each stop is drawn in the stop's padding-top
   area by its ::before. */
.ws-route {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.ws-route li {
    position: relative;
    padding-left: 40px;
    min-height: 28px;
}

.ws-stop {
    padding-top: 26px;
}

.ws-route li:first-child {
    padding-top: 0;
}

/* Connector segment entering this stop (drawn in the padding-top area). */
.ws-stop::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 0;
    height: 26px;
    border-left: 2px dashed rgba(var(--rgb-gray), 0.5);
}

.ws-route li:first-child::before {
    content: none;
}

/* Segment already travelled: solid green. */
.ws-stop.is-done::before {
    border-left-style: solid;
    border-left-color: var(--color-green);
}

/* Segment the rocket is currently flying: taller, to give it airspace. */
.ws-stop.has-rocket {
    padding-top: 84px;
}

.ws-stop.has-rocket::before {
    height: 84px;
    border-left-color: rgba(var(--rgb-purple), 0.6);
}

.ws-stop-dot {
    position: absolute;
    left: 0;
    top: auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(var(--rgb-gray), 0.5);
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.ws-stop .ws-stop-dot {
    margin-top: -2px;
}

.ws-stop.is-done .ws-stop-dot {
    border-color: var(--color-green);
    background: var(--color-green);
    color: var(--color-white);
}

.ws-stop.is-current .ws-stop-dot {
    border-color: var(--color-purple);
    animation: ws-current-pulse 2s ease-in-out infinite;
}

@keyframes ws-current-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--rgb-purple), 0.45); }
    50%      { box-shadow: 0 0 0 8px rgba(var(--rgb-purple), 0); }
}

.ws-stop-title {
    display: block;
    font-weight: 600;
    line-height: 1.3;
    padding-top: 3px;
}

.ws-stop-date {
    display: block;
    font-size: 0.85rem;
    color: var(--color-gray);
}

/* Launch pad / mission complete rows. */
.ws-route-pad {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 40px;
}

.ws-route-pad .ws-rocket {
    position: absolute;
    left: 2px;
}

.ws-route-pad-label {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--color-gray);
}

.ws-route-pad--landed {
    padding-top: 30px;
}

.ws-route-pad--landed::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 0;
    height: 26px;
    border-left: 2px solid var(--color-green);
}

/* The rocket itself. */
.ws-rocket {
    display: inline-block;
    width: 24px;
    height: 36px;
    line-height: 0;
}

.ws-rocket-body   { fill: var(--color-purple); }
.ws-rocket-fin    { fill: var(--color-sky); }
.ws-rocket-window { fill: var(--color-white); }
.ws-rocket-flame  {
    fill: var(--color-orange);
    transform-origin: 12px 25.5px;
    animation: ws-flame-flicker 0.35s ease-in-out infinite;
}

.ws-rocket--parked .ws-rocket-flame {
    display: none;
}

/* Flying: nose points down (towards the next stop); the wrapper span
   bobs along the connector while the svg carries the rotation. */
.ws-rocket--flying .ws-rocket-svg {
    transform: rotate(180deg);
}

.ws-stop.has-rocket .ws-rocket {
    position: absolute;
    left: 1px;
    top: 8px;
    animation: ws-rocket-fly 3.2s ease-in-out infinite;
}

@keyframes ws-rocket-fly {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(32px); }
}

@keyframes ws-flame-flicker {
    0%, 100% { transform: scaleY(1);   opacity: 0.95; }
    50%      { transform: scaleY(0.7); opacity: 0.6;  }
}

.ws-status-note {
    margin-top: 1rem;
}

/* Respect reduced-motion preferences: park all the animations. */
@media (prefers-reduced-motion: reduce) {
    .ws-stop.has-rocket .ws-rocket,
    .ws-rocket-flame,
    .ws-stop.is-current .ws-stop-dot {
        animation: none;
    }
}

/* Dark mode. */
[data-theme="dark"] .ws-shuttle-card {
    background: #242424;
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .ws-stop-dot {
    background: #242424;
}

[data-theme="dark"] .ws-stop.is-done .ws-stop-dot {
    background: var(--color-green);
}