/* Wrapper Background */
.my-esim-page-wrapper {
    background-color: #e3e8ef; /* Light Gray */
    padding: 1rem;
    border-radius: 1rem;
}

/* Left Menu */
.my-esim-page-wrapper .left-menu .left-menu-title {
    color: #121926; /* Dark Text */
}

.left-menu {
    border: 0;
    padding-right: 1rem;
}

/* Text Colors in Content Sections */
.my-esim-page-wrapper .my-esims-page-content .trail-title-4,
.my-esim-page-wrapper .trail-body-2,
.my-esim-page-wrapper .my-esims-page-content .trail-caption {
    color: #121926; /* Dark Text */
}

/* Progress Bar Fill */
.my-esim-page-wrapper .progress-bar .progress-bar-fill {
    background-color: #528bff; /* Blue */
}

/* Active and Hovered eSIM Titles */
.my-esim-page-wrapper .esim-list-title:hover {
    color: #fff !important; /* White Text */
    background: #84adff !important; /* Hover Blue */
    border-radius: 1rem;
}

.my-esim-page-wrapper .esim-list-title.active {
    color: #fff !important; /* White Text */
    background: #528bff !important; /* Active Blue */
    border-radius: 1rem;
}

/* Status Text (e.g., Active) */
.my-esim-page-wrapper .data-usage-package-date-status {
    color: #73DC8C; /* Green */
}

/* General Labels */
.my-esim-page-wrapper .my-esims-page-content label {
    color: #fcfcfd; /* White */
}

/* Labels for "Manual" and "QR Code" Tabs */
.my-esim-page-wrapper .my-esims-page-content label[for="my-esim-page-tab-manual"],
.my-esim-page-wrapper .my-esims-page-content label[for="my-esim-page-tab-qr"] {
    color: #121926; /* Black */
}

/* Remaining Data Labels */
.my-esim-page-wrapper .data-usage-package-remaining-data-title {
    color: #808080; /* Gray */
}

/* My eSIM Page List Title */
.my-esims-page-list-title {
    background: #528bff; /* White Background */
    border: 0;
    border-radius: 1rem;
    margin-bottom: 0.5rem;
}

/* My eSIM Page List Title Arrow */
.my-esims-page-list-title:after {
    content: ''; /* Remove the SVG file from `content` */
    position: absolute;
    top: 50%;
    right: 16px;
    transform: rotate(-45deg) translateY(-50%);
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url(../images/icon-chevron-close.svg); /* Use background-image */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-color: #fcfcfd; /* White */
}

/* Tabs Active State */
.my-esim-page-tabs-radio:checked + .my-esim-page-tabs_label {
    font-weight: bold;
    color: #121926; /* Dark Text */
    border-bottom: 2px solid #121926; /* Dark Border */
}

/* Specific Fix for QR Code Label */
.my-esim-page-tabs-radio:checked + .my-esim-page-tabs_label[for="my-esim-page-tab-qr"] {
    font-weight: bold;
    color: #121926; /* Correct Color */
    border-bottom: 2px solid #121926 !important; /* Prevent Red Line */
}

/* Highlighted Text (Trail Title 5) */
.trail-title-5 {
    color: #528bff; /* Blue */
}

/* Link Styles */
.link-clear {
    text-decoration: none !important;
    padding-bottom: 1rem;
    background: #e3e8f0;
}

/* Alternating eSIM List Titles */
.esim-list-link:nth-child(2n) .esim-list-title {
    background: #fcfcfd; /* White */
    border-radius: 1rem;
}

.esim-list-title {
    background: #fcfcfd;
    border-radius: 1rem;
}

/* Usage Wrapper */
.usage-wrapper-items {
    border: 0;
}

/* Data Usage Packages */
.data-usage-packages-wrapper {
    border: 2px solid #84adff;
    border-radius: 1rem;
}
