/**
 * Product Shipping Methods Widget Styles
 * Version: 9.0.0 (Final Hybrid Version)
 * Refactored to Canonical Tokens
 */
.gk-psm {
    direction: rtl;
    cursor: pointer;
    border-bottom: var(--gk-border-width) solid var(--gk-border-color);
}

/* Universal Icon Sizing */
.gk-psm-preview__header-icon,
.gk-psm-preview__method-icon,
.gk-psm-method__visual {
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.gk-psm-preview__header-icon > *,
.gk-psm-preview__method-icon > *,
.gk-psm-method__visual > * {
    width: 1em; height: 1em; object-fit: contain;
}

/* New Preview Trigger Design */
.gk-psm-preview {
    padding: 12px 16px;
}
.gk-psm-preview__header {
    display: flex; align-items: center; margin-bottom: 8px;
}
.gk-psm-preview__header-icon { margin-inline-end: 12px; font-size: 24px; color: var(--gk-neutral-600); }
.gk-psm-preview__title { margin: 0; font-size: 14px; font-weight: 700; color: var(--gk-text); }
.gk-psm-preview__chevron { display: flex; margin-inline-start: auto; color: var(--gk-neutral-400); }
.gk-psm-preview__chevron svg { fill: currentColor; }
.gk-psm-preview__methods { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.gk-psm-preview__method { display: flex; align-items: center; }
.gk-psm-preview__method:not(:last-child) { margin-bottom: 4px; }
.gk-psm-timeline {
    width: 24px; min-width: 24px; position: relative;
    display: flex; justify-content: center; align-self: stretch;
    margin-inline-end: 12px;
}
.gk-psm-timeline__dot-container { display: flex; }
.gk-psm-timeline__dot { width: 5px; height: 5px; background-color: var(--gk-secondary); border-radius: var(--gk-radius-round); }
.gk-psm-timeline__line {
    position: absolute; top: 50%; inset-inline-start: 50%;
    transform: translateX(-50%); height: calc(100% - 5px);
    width: 1px; background-color: var(--gk-border-color);
}
.gk-psm-preview__method-icon { font-size: 16px; color: var(--gk-primary); }
.gk-psm-preview__method:nth-child(2) .gk-psm-preview__method-icon { color: var(--gk-secondary); }
.gk-psm-preview__method-title { display: flex; align-items: center; margin-inline-start: 4px; }
.gk-psm-preview__method-title span { font-size: 12px; color: var(--gk-neutral-600); }

/* Modal Styles */
.gk-psm-modal__overlay, .gk-psm-modal { position: fixed; inset: 0; z-index: 9998; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.gk-psm.is-open .gk-psm-modal__overlay, .gk-psm.is-open .gk-psm-modal { opacity: 1; pointer-events: auto; }
.gk-psm-modal { z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; }
.gk-psm-modal__inner {
    width: 100%; max-width: 540px; max-height: calc(100vh - 48px);
    background-color: var(--gk-surface); border-radius: var(--gk-radius-xl); box-shadow: var(--gk-shadow-lg);
    display: flex; flex-direction: column; overflow: hidden;
    transform: scale(0.95); transition: opacity 0.25s ease, transform 0.25s ease;
}
.gk-psm.is-open .gk-psm-modal__inner { transform: scale(1); }
.gk-psm-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; flex-shrink: 0; border-block-end: var(--gk-border-width) solid var(--gk-neutral-100);
}
.gk-psm-modal__title { margin: 0; font-size: 18px; font-weight: 700; }
.gk-psm-modal__close {
    border: none; background: none; padding: 0; cursor: pointer; color: var(--gk-neutral-500);
    width: 36px; height: 36px; border-radius: var(--gk-radius-round); display: grid; place-items: center;
    transition: background-color 0.2s;
}
.gk-psm-modal__close:hover { background-color: var(--gk-neutral-50); }
.gk-psm-modal__close svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.gk-psm-modal__body { padding: 24px 20px; overflow-y: auto; background-color: var(--gk-neutral-50); }
.gk-psm-modal__methods { display: flex; flex-direction: column; gap: 16px; }
.gk-psm-method { background-color: var(--gk-surface); border-radius: var(--gk-radius-md); padding: 16px; border: var(--gk-border-width) solid var(--gk-neutral-100); }
.gk-psm-method__header { display: flex; align-items: center; gap: 12px; }
.gk-psm-method__visual { width: 48px; height: 48px; flex-shrink: 0; font-size: 24px; }
.gk-psm-method__title-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.gk-psm-method__title { margin: 0; font-size: 16px; font-weight: 600; }
.gk-psm-method__badge { padding: 3px 10px; border-radius: var(--gk-radius-round); background-color: var(--gk-neutral-100); color: var(--gk-accent); font-size: 11px; font-weight: 500; }
.gk-psm-method__description { font-size: 14px; color: var(--gk-neutral-600); line-height: 1.8; margin-block-start: 12px; padding-inline-start: 10px; border-inline-start: 2px solid var(--gk-neutral-100); }
.gk-psm-modal__footer { padding: 16px 20px; flex-shrink: 0; border-block-start: var(--gk-border-width) solid var(--gk-neutral-100); }
.gk-psm-modal__btn {
    width: 100%; border-radius: var(--gk-radius-lg); border: none; padding: 12px 16px;
    background-color: var(--gk-neutral-100); color: var(--gk-text); cursor: pointer;
    font-size: 15px; font-weight: 600; text-align: center;
    transition: background-color 0.2s ease, transform 0.1s ease;
}
.gk-psm-modal__btn:hover { background-color: var(--gk-neutral-200); }
@media (max-width: 600px) {
    .gk-psm-modal { align-items: flex-end; padding: 0; }
    .gk-psm-modal__inner { max-width: 100%; max-height: 85vh; border-radius: 20px 20px 0 0; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
    .gk-psm.is-open .gk-psm-modal__inner { transform: translateY(0); }
}