/* ── Share button ───────────────────────────────────────────────────
 * Base style: standalone button appended after the classic cart table or
 * checkout form. `clear` keeps it below any floated theme markup instead of
 * overlapping it, and the label never wraps.
 * ------------------------------------------------------------------- */
.mtv-share-checkout-btn {
    display: inline-block;
    clear: both;
    padding: 10px 20px;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 15px;
}

/* Clearfix for the classic templates: the hooks we render into
   (woocommerce_after_cart_table / woocommerce_after_checkout_form) often sit
   next to floated totals, which would otherwise collapse the parent. */
.mtv-share-checkout-btn::after {
    content: "";
    display: table;
    clear: both;
}

/* Injected as a sibling of the block checkout's place-order button, inside
   `.wc-block-checkout__actions_row` (display:flex; align-items:center).
   As a flex item the button must not shrink below its label, must drop the
   top margin that pushes it off the row's centre line, and should match the
   neighbouring button's height and corner radius. */
.mtv-share-checkout-btn--inline {
    flex: 0 0 auto;
    align-self: stretch;
    margin-top: 0;
    border-radius: 8px;
}

/* Appended below the block cart's "Proceed to checkout" button, inside a
   block-level container. Full width so it lines up with the primary CTA,
   without competing with it for emphasis. */
.mtv-share-checkout-btn--stacked {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 14px 20px;
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
}

.mtv-share-checkout-btn:hover:not(:disabled) {
    background-color: #005a87;
}

.mtv-share-checkout-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.mtv-share-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.mtv-share-modal {
    background-color: white;
    border-radius: 8px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    position: relative;
}

.mtv-share-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    line-height: 1;
}

.mtv-share-modal-close:hover {
    color: #000;
}

.mtv-share-modal h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 20px;
    color: #333;
}

.mtv-share-modal p {
    margin: 10px 0;
    color: #666;
    font-size: 14px;
}

.mtv-share-url-input-group {
    display: flex;
    gap: 10px;
    margin: 20px 0;
}

.mtv-share-url-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'Courier New', monospace;
    word-break: break-all;
}

.mtv-copy-btn {
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.mtv-copy-btn:hover {
    background-color: #218838;
}

.mtv-share-success-message {
    font-weight: 500;
    text-align: center;
}