/* Internet calculator: compact carrier bundle option and LG plan-tier pickers */

.lg-easy-plan-storage {
    display: none !important;
}

.lg-easy-config-trigger {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center !important;
    gap: 11px !important;
    width: 100% !important;
    min-height: 70px !important;
    padding: 11px 13px !important;
    text-align: left !important;
    white-space: normal !important;
}

.lg-easy-trigger-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: #1a73e8;
    background: #eaf2ff;
}

.lg-easy-trigger-icon.is-complete {
    color: #12805c;
    background: #e7f7f1;
}

.lg-easy-trigger-copy {
    min-width: 0;
}

.lg-easy-trigger-copy strong,
.lg-easy-trigger-copy small {
    display: block;
}

.lg-easy-trigger-copy strong {
    color: #273238;
    font-size: 0.95rem;
    line-height: 1.35;
}

.lg-easy-trigger-copy small {
    margin-top: 3px;
    overflow: hidden;
    color: #6b7780;
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lg-easy-trigger-copy small.has-warning {
    color: #a15c05;
}

.lg-easy-trigger-action {
    color: #1a73e8;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

/* SK/KT line-count picker: ten choices stay inside the popup instead of the form. */
#generic-picker-list.compact-count-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 14px 18px 18px;
}

#generic-picker-list.compact-count-grid .plan-picker-item {
    justify-content: center;
    min-height: 58px;
    padding: 8px 4px;
}

#generic-picker-list.compact-count-grid .plan-picker-info {
    text-align: center;
}

#generic-picker-list.compact-count-grid .plan-picker-name {
    font-size: 0.93rem;
}

#generic-picker-list.compact-count-grid .plan-picker-data {
    display: none;
}

#generic-picker-list.compact-count-grid .picker-reset-item {
    grid-column: 1 / -1;
    min-height: 42px;
    color: #68747b;
    background: #f1f4f5;
    border-style: dashed;
}

#generic-picker-list.compact-count-grid .picker-reset-item .plan-picker-data {
    display: block;
}

#generic-picker-list button.plan-picker-item {
    width: 100%;
    font: inherit;
    text-align: inherit;
}

#generic-picker-list button.plan-picker-item:focus-visible,
#generic-picker-close-btn:focus-visible {
    outline: 3px solid rgba(26, 115, 232, 0.35);
    outline-offset: 2px;
}

#generic-picker-close-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    color: #5d6970;
    background: transparent;
    font: inherit;
    font-size: 1.55rem;
    line-height: 1;
}

body.dark-mode #generic-picker-close-btn {
    color: #d1d5db;
    background: #374151;
}

/* LG Easy Bundle integrated configuration modal */
#lg-easy-config-modal .modal-content {
    width: min(100%, 620px);
    max-width: 620px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    padding: 0;
    border-radius: 20px;
    outline: none;
}

.lg-easy-config-head {
    position: relative;
    flex: 0 0 auto;
    padding: 22px 64px 16px 22px;
    border-bottom: 1px solid #e8edf0;
}

.lg-easy-config-kicker {
    margin: 0 0 5px;
    color: #1a73e8;
    font-size: 0.73rem;
    font-weight: 800;
}

.lg-easy-config-head h2 {
    margin: 0;
    color: #273238;
    font-size: 1.22rem;
    line-height: 1.35;
    text-align: left;
}

.lg-easy-config-head > p:last-of-type {
    margin: 6px 0 0;
    color: #6b7780;
    font-size: 0.78rem;
    line-height: 1.5;
}

.lg-easy-modal-close {
    position: absolute;
    top: 17px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    color: #5d6970;
    background: #f0f3f4;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
}

.lg-easy-config-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 22px;
}

.lg-easy-config-section + .lg-easy-config-section {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px dashed #d8e0e4;
}

.lg-easy-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.lg-easy-section-heading strong {
    color: #273238;
    font-size: 0.9rem;
}

.lg-easy-section-heading small {
    color: #818d94;
    font-size: 0.7rem;
    text-align: right;
}

.lg-easy-count-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.lg-easy-more-lines {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 48px;
    margin-top: 9px;
    padding: 8px 12px;
    border: 1px dashed #9cbce5;
    border-radius: 11px;
    color: #245eaa;
    background: #f4f8ff;
    cursor: pointer;
}

.lg-easy-more-lines[hidden] {
    display: none;
}

.lg-easy-more-lines:hover {
    border-color: #1a73e8;
    background: #eaf2ff;
}

.lg-easy-more-lines-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    color: #fff;
    background: #1a73e8;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

.lg-easy-more-lines strong,
.lg-easy-more-lines small {
    display: block;
    text-align: left;
}

.lg-easy-more-lines strong {
    font-size: 0.8rem;
}

.lg-easy-more-lines small {
    margin-top: 1px;
    color: #75849a;
    font-size: 0.66rem;
    font-weight: 500;
}

.lg-easy-count-option {
    min-height: 56px;
    padding: 7px 3px;
    border: 1px solid #d5dde2;
    border-radius: 11px;
    color: #3f4c53;
    background: #fff;
    cursor: pointer;
}

.lg-easy-count-option:hover {
    border-color: #8db6eb;
    background: #f6f9ff;
}

.lg-easy-count-option strong,
.lg-easy-count-option small {
    display: block;
}

.lg-easy-count-option strong {
    font-size: 1rem;
    line-height: 1.1;
}

.lg-easy-count-option small {
    margin-top: 4px;
    color: #849098;
    font-size: 0.66rem;
}

.lg-easy-count-option.is-selected {
    color: #fff;
    background: #1a73e8;
    border-color: #1a73e8;
    box-shadow: 0 6px 16px rgba(26, 115, 232, 0.2);
}

.lg-easy-count-option.is-selected small {
    color: rgba(255, 255, 255, 0.8);
}

.lg-easy-tier-list {
    display: grid;
    gap: 8px;
}

.lg-easy-tier-row {
    overflow: hidden;
    border: 1px solid #dce3e7;
    border-radius: 12px;
    background: #fff;
}

.lg-easy-tier-row.is-open {
    border-color: #9fc0ee;
    box-shadow: 0 7px 20px rgba(26, 115, 232, 0.08);
}

.lg-easy-tier-row-trigger {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 58px;
    padding: 9px 12px;
    border: 0;
    color: #273238;
    background: #fff;
    cursor: pointer;
    text-align: left;
}

.lg-easy-tier-row.is-open .lg-easy-tier-row-trigger {
    background: #f5f9ff;
}

.lg-easy-line-number {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 9px;
    color: #1a73e8;
    background: #eaf2ff;
    font-size: 0.76rem;
    font-weight: 800;
}

.lg-easy-tier-row-copy {
    min-width: 0;
}

.lg-easy-tier-row-copy strong,
.lg-easy-tier-row-copy small {
    display: block;
}

.lg-easy-tier-row-copy strong {
    font-size: 0.82rem;
}

.lg-easy-tier-row-copy small {
    margin-top: 3px;
    overflow: hidden;
    color: #6d7980;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lg-easy-tier-chevron {
    color: #78858c;
    font-size: 1rem;
    transition: transform 0.18s ease;
}

.lg-easy-tier-row.is-open .lg-easy-tier-chevron {
    transform: rotate(180deg);
}

.lg-easy-tier-options {
    display: grid;
    gap: 7px;
    padding: 10px;
    border-top: 1px solid #e4eaf0;
    background: #fbfcfd;
}

.lg-easy-tier-option {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 52px;
    padding: 8px 10px;
    border: 1px solid #dbe2e6;
    border-radius: 10px;
    color: #354148;
    background: #fff;
    cursor: pointer;
    text-align: left;
}

.lg-easy-tier-option:hover {
    border-color: #8fb7ed;
    background: #f7faff;
}

.lg-easy-tier-option.is-selected {
    border-color: #1a73e8;
    background: #edf4ff;
    box-shadow: inset 0 0 0 1px #1a73e8;
}

.lg-easy-tier-radio {
    width: 16px;
    height: 16px;
    border: 2px solid #b7c1c7;
    border-radius: 50%;
}

.lg-easy-tier-option.is-selected .lg-easy-tier-radio {
    border: 5px solid #1a73e8;
}

.lg-easy-tier-option-copy {
    min-width: 0;
}

.lg-easy-tier-option-copy strong,
.lg-easy-tier-option-copy small {
    display: block;
}

.lg-easy-tier-option-copy strong {
    font-size: 0.8rem;
    line-height: 1.3;
}

.lg-easy-tier-option-copy small {
    margin-top: 2px;
    color: #707c83;
    font-size: 0.69rem;
    line-height: 1.35;
}

.lg-easy-tier-badge {
    padding: 4px 6px;
    border-radius: 7px;
    color: #425058;
    background: #edf0f2;
    font-size: 0.62rem;
    font-weight: 800;
    white-space: nowrap;
}

.lg-easy-tier-option.tone-warning .lg-easy-tier-badge {
    color: #9b5800;
    background: #fff0d6;
}

.lg-easy-tier-option.tone-best .lg-easy-tier-badge {
    color: #14704f;
    background: #e4f7ef;
}

.lg-easy-apply-all {
    min-height: 40px;
    border: 1px dashed #94add0;
    border-radius: 9px;
    color: #315f9d;
    background: #f4f8ff;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
}

.lg-easy-tier-empty {
    display: grid;
    place-items: center;
    padding: 25px 15px;
    border: 1px dashed #cfd8dd;
    border-radius: 12px;
    color: #738087;
    background: #f8fafb;
    text-align: center;
}

.lg-easy-tier-empty > span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-bottom: 8px;
    border-radius: 9px;
    color: #fff;
    background: #99a5ab;
    font-size: 0.75rem;
    font-weight: 800;
}

.lg-easy-tier-empty strong {
    font-size: 0.8rem;
}

.lg-easy-tier-empty small {
    max-width: 360px;
    margin-top: 5px;
    font-size: 0.7rem;
    line-height: 1.45;
}

.lg-easy-config-foot {
    display: grid;
    grid-template-columns: auto 0.75fr 1.25fr;
    gap: 8px;
    flex: 0 0 auto;
    padding: 13px 22px 20px;
    border-top: 1px solid #e8edf0;
    background: #fff;
}

.lg-easy-config-foot button {
    min-height: 46px;
    border-radius: 11px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 750;
}

.lg-easy-config-clear {
    padding: 0 11px;
    border: 0;
    color: #7b868c;
    background: transparent;
}

.lg-easy-config-cancel {
    border: 1px solid #d5dde2;
    color: #5c6870;
    background: #fff;
}

.lg-easy-config-apply {
    border: 1px solid #1a73e8;
    color: #fff;
    background: #1a73e8;
    box-shadow: 0 7px 17px rgba(26, 115, 232, 0.2);
}

.lg-easy-config-apply:disabled {
    border-color: #cbd3d8;
    color: #7f8b92;
    background: #e8ecef;
    box-shadow: none;
    cursor: not-allowed;
}

.lg-easy-config-summary {
    grid-column: 1 / -1;
    margin: 0 0 2px;
    padding: 8px 10px;
    border-radius: 9px;
    color: #22684f;
    background: #eaf7f2;
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
}

.lg-easy-config-summary.has-warning {
    color: #91530a;
    background: #fff3df;
}

.lg-easy-config-summary.is-incomplete:not(.has-warning) {
    color: #315f9d;
    background: #edf4ff;
}

body.dark-mode .lg-easy-trigger-icon {
    color: #8bbcff;
    background: #203a60;
}

body.dark-mode .lg-easy-trigger-icon.is-complete {
    color: #6ee7b7;
    background: #174438;
}

body.dark-mode .lg-easy-trigger-copy strong,
body.dark-mode .lg-easy-config-head h2,
body.dark-mode .lg-easy-section-heading strong {
    color: #f1f5f9;
}

body.dark-mode .lg-easy-trigger-copy small,
body.dark-mode .lg-easy-config-head > p:last-of-type,
body.dark-mode .lg-easy-section-heading small {
    color: #9ca9b4;
}

body.dark-mode .lg-easy-trigger-copy small.has-warning {
    color: #fbbf6a;
}

body.dark-mode #generic-picker-list.compact-count-grid .picker-reset-item {
    color: #d1d5db !important;
    background: #273343 !important;
    border-color: #64748b !important;
}

body.dark-mode #generic-picker-list.compact-count-grid .picker-reset-item .plan-picker-name {
    color: #f1f5f9 !important;
}

body.dark-mode #generic-picker-list.compact-count-grid .picker-reset-item .plan-picker-data {
    color: #aeb7c2 !important;
}

body.dark-mode #lg-easy-config-modal .lg-easy-config-summary {
    color: #9de2c9 !important;
    background: #174438 !important;
}

body.dark-mode #lg-easy-config-modal .lg-easy-config-summary.has-warning {
    color: #fbbf24 !important;
    background: #422006 !important;
}

body.dark-mode #lg-easy-config-modal .lg-easy-config-summary.is-incomplete:not(.has-warning) {
    color: #bfdbfe !important;
    background: #1e3a5f !important;
}

body.dark-mode #lg-easy-config-modal .modal-content,
body.dark-mode .lg-easy-config-foot {
    background: #1f2937;
}

body.dark-mode .lg-easy-config-head,
body.dark-mode .lg-easy-config-foot {
    border-color: #3d4856;
}

body.dark-mode .lg-easy-modal-close {
    color: #d1d5db;
    background: #374151;
}

body.dark-mode .lg-easy-config-section + .lg-easy-config-section {
    border-color: #4b5563;
}

body.dark-mode .lg-easy-count-option,
body.dark-mode .lg-easy-tier-row,
body.dark-mode .lg-easy-tier-row-trigger,
body.dark-mode .lg-easy-tier-option {
    color: #e5e7eb;
    background: #273343;
    border-color: #4b5563;
}

body.dark-mode .lg-easy-more-lines {
    color: #bfdbfe;
    background: #273343;
    border-color: #52709a;
}

body.dark-mode .lg-easy-more-lines:hover {
    background: #203a60;
    border-color: #60a5fa;
}

body.dark-mode .lg-easy-more-lines small {
    color: #aeb7c2;
}

.bundle-radio-picker-storage {
    display: none !important;
}

.kt-fixed-plan-config {
    margin: 10px 0 16px;
    padding: 14px;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    background: #f8fafc;
}

.kt-fixed-plan-config-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.kt-fixed-plan-config-heading strong {
    color: #172033;
    font-size: 0.96rem;
}

.kt-fixed-plan-config-heading small {
    color: #64748b;
    line-height: 1.45;
}

.kt-fixed-plan-picker-row {
    margin: 0 0 10px;
}

.kt-fixed-plan-picker-row:last-child {
    margin-bottom: 0;
}

body.dark-mode .kt-fixed-plan-config {
    border-color: #3f4a5f;
    background: #202938;
}

body.dark-mode .kt-fixed-plan-config-heading strong {
    color: #f8fafc;
}

body.dark-mode .kt-fixed-plan-config-heading small {
    color: #aebbd0;
}

body.dark-mode .lg-easy-count-option.is-selected,
body.dark-mode .lg-easy-tier-option.is-selected {
    background: #245fae;
    border-color: #60a5fa;
}

body.dark-mode .lg-easy-tier-row.is-open .lg-easy-tier-row-trigger,
body.dark-mode .lg-easy-tier-options {
    background: #182334;
}

body.dark-mode .lg-easy-tier-options {
    border-color: #3d4856;
}

body.dark-mode .lg-easy-tier-row-copy small,
body.dark-mode .lg-easy-tier-option-copy small {
    color: #aeb7c2;
}

body.dark-mode .lg-easy-tier-empty {
    color: #aeb7c2;
    background: #273343;
    border-color: #4b5563;
}

@media (max-width: 600px) {
    .kt-fixed-plan-config {
        margin-top: 8px;
        padding: 12px;
        border-radius: 12px;
    }

    .kt-fixed-plan-picker-row .tv-plan-picker-trigger {
        min-height: 52px !important;
    }

    #generic-picker-modal[data-picker-layout="line-count"],
    #generic-picker-modal[data-picker-layout="bundle-value"],
    #lg-easy-config-modal {
        align-items: flex-end;
        padding: 0;
    }

    #generic-picker-modal[data-picker-layout="line-count"] .modal-content,
    #generic-picker-modal[data-picker-layout="bundle-value"] .modal-content,
    #lg-easy-config-modal .modal-content {
        align-self: flex-end;
        width: 100%;
        max-width: none;
        max-height: calc(100dvh - 22px);
        margin: 0;
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
    }

    #generic-picker-modal[data-picker-layout="line-count"].active .modal-content,
    #generic-picker-modal[data-picker-layout="bundle-value"].active .modal-content,
    #lg-easy-config-modal.active .modal-content {
        transform: translateY(0);
    }

    .lg-easy-config-head {
        padding: 18px 58px 14px 17px;
    }

    .lg-easy-config-head h2 {
        font-size: 1.05rem;
    }

    .lg-easy-modal-close {
        top: 10px;
        right: 12px;
    }

    .lg-easy-config-body {
        padding: 15px 16px 72px;
        scroll-padding-bottom: 92px;
    }

    .lg-easy-config-foot {
        grid-template-columns: auto 0.72fr 1.28fr;
        padding: 11px 16px max(16px, env(safe-area-inset-bottom));
    }

    .lg-easy-config-clear {
        min-height: 46px !important;
    }

    .lg-easy-config-cancel {
        grid-column: auto;
    }

    .lg-easy-config-apply {
        grid-column: auto;
    }

    .lg-easy-config-summary {
        grid-column: 1 / -1;
    }

    .lg-easy-config-trigger {
        grid-template-columns: 39px minmax(0, 1fr) auto;
        min-height: 66px !important;
        padding: 10px 11px !important;
    }

    .lg-easy-trigger-icon {
        width: 39px;
        height: 39px;
    }

    .lg-easy-trigger-copy strong {
        font-size: 0.84rem;
    }

    .lg-easy-trigger-copy small {
        font-size: 0.68rem;
    }

    #generic-picker-list.compact-count-grid {
        gap: 7px;
        padding: 12px 14px 16px;
    }
}