:root {
    --navy: #050472;
    --navy-2: #2d2d79;
    --blue: #123cff;
    --blue-2: #0919ff;
    --lav: #8589ff;
    --ink: #171752;
    --muted: #9292a6;
    --soft: #f1f1f7;
    --line: #dfe0e8;
    --danger: #ff6b63;
    --ios-radius: 38px;
}

* {
    box-sizing: border-box
}

html,
body {
    min-height: 100%;
    background: #edf0f6
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit
}

button,
input,
select {
    font: inherit
}

.app-shell {
    width: min(100%, 430px);
    min-height: 100dvh;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background: #fff;
}

.screen {
    min-height: 100dvh;
    padding: calc(20px + env(safe-area-inset-top)) 24px calc(100px + env(safe-area-inset-bottom));
    background: #fff;
}

.screen.dark {
    color: #fff;
    background: var(--navy);
}

.screen.onboarding {
    background: var(--navy-2);
    color: #fff;
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
}

.ios-header {
    min-height: 58px;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.ios-header .title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .1px;
}

.ios-back,
.icon-btn {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: inherit;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
}

.ios-back:hover,
.icon-btn:hover {
    background: rgba(127, 127, 127, .09)
}

.ios-back:active,
.icon-btn:active {
    transform: scale(.95)
}

.ios-back i {
    font-size: 28px
}

.stepper {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 28px 0 64px
}

.stepper span {
    width: 16px;
    height: 16px;
    background: var(--lav);
    border-radius: 50%;
    opacity: .9
}

.stepper span.active {
    width: 38px;
    border-radius: 12px;
    background: var(--blue)
}

.field {
    margin-bottom: 26px
}

.field label {
    display: block;
    color: #7779c0;
    font-size: 14px;
    margin-bottom: 5px
}

.field .value,
.field input,
.field select {
    width: 100%;
    border: 0;
    border-bottom: 1.5px solid #8087ff;
    background: transparent;
    color: inherit;
    padding: 0 0 10px;
    outline: 0;
    border-radius: 0;
}

.screen.dark .field input::placeholder {
    color: #686baa
}

.field select option {
    color: #222
}

.floating-action {
    position: absolute;
    left: 50%;
    bottom: 44px;
    transform: translateX(-50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 0;
    background: var(--blue-2);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 32px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}

.floating-action:active {
    transform: translateX(-50%) scale(.96)
}

.btn-primary-ios {
    --bs-btn-bg: var(--blue);
    --bs-btn-border-color: var(--blue);
    --bs-btn-hover-bg: #0b32e8;
    --bs-btn-hover-border-color: #0b32e8;
    border-radius: 0;
    min-height: 49px;
    font-weight: 500;
    color: #fff;
    padding-bottom: 8px;
}
.btn:hover{color:#fff}
.btn-outline-ios {
    border: 1.5px solid #7d83ff;
    color: #a1a5ff;
    border-radius: 0;
    min-height: 50px;
}

.btn-outline-ios:hover {
    background: #15158d;
    color: #fff
}

.logo-mark {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    margin: 60px auto 24px;
    color: var(--blue);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08)
}

.logo-mark i {
    font-size: 78px
}

.brand-lockup {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 350px
}

.brand-symbol {
    width: 94px;
    height: 94px;
    border-radius: 50%;
    position: relative;
    background: conic-gradient(from 205deg, #8e78ff, #0b2cff, #10d8ef, #8e78ff);
    display: grid;
    place-items: center;
    color: white;
    font-weight: 800;
    font-size: 33px;
    box-shadow: inset 0 0 0 18px var(--navy)
}

.brand-symbol span {
    background: var(--navy);
    padding: 4px
}

.brand-divider {
    height: 78px;
    width: 2px;
    background: #c8c9e6
}

.brand-text {
    font-size: 15px;
    line-height: 1.45;
    font-weight: 650
}

.splash {
    padding: 0 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--navy);
    color: #fff;
    min-height: 100dvh;
    position: relative;
}

.splash .rings {
    position: absolute;
    right: -65%;
    bottom: -12%;
    width: 155%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid #2e31ec;
    box-shadow:
        0 0 0 24px var(--navy), 0 0 0 26px #4934d1,
        0 0 0 50px var(--navy), 0 0 0 52px #143bed,
        0 0 0 78px var(--navy), 0 0 0 80px #00c2ea,
        0 0 0 108px var(--navy), 0 0 0 110px #4b2ac9;
    opacity: .8;
}

.login-title {
    font-size: 25px;
    text-align: center;
    font-weight: 400;
    margin: 0
}

.login-sub {
    font-size: 13px;
    text-align: center;
    opacity: .9
}

.separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 26px 0
}

.separator:before,
.separator:after {
    content: "";
    height: 1px;
    background: #99a0ff;
    flex: 1
}

.separator span {
    font-size: 12px;
    font-weight: 700
}

.note {
    font-size: 13px;
    line-height: 1.8
}

.note strong {
    color: var(--danger)
}

.skip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 28px;
    font-size: 17px
}

.services-screen {
    padding-left: 14px;
    padding-right: 14px
}

.profile-hero {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 24px 28px 32px
}

.avatar {
    width: 128px;
    height: 128px;
    border: 2px solid #888;
    border-radius: 50%;
    background: linear-gradient(#f8f8fb, #ededf5);
    display: grid;
    place-items: center;
    position: relative;
}

.avatar i {
    font-size: 82px;
    color: #e0e0e8
}

.camera-dot {
    position: absolute;
    right: 3px;
    bottom: 8px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--blue);
    color: var(--blue);
    display: grid;
    place-items: center
}

.service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.service-card {
    min-height: 180px;
    background: var(--soft);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
    text-align: center;
    transition: .2s ease;
    border: 0;
}

.service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(19, 19, 70, .07)
}

.service-card .art {
    font-size: 72px;
    color: var(--blue-2);
    line-height: 1
}

.service-card .label {
    font-size: 12px;
    margin-top: 13px;
    font-weight: 600
}

.tabbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 88px;
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid #dedee5;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    z-index: 50;
    box-shadow: 0 -1px 7px rgba(0, 0, 0, .025);
    backdrop-filter: blur(14px);
}

.tab-item {
    border: 0;
    background: transparent;
    color: #c8d1ff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    gap: 3px;
    position: relative;
}

.tab-item i {
    font-size: 29px
}

.tab-item.active {
    color: var(--blue)
}

.tab-item.active:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--blue)
}

.page-title {
    color: var(--blue);
    font-weight: 600
}

.panel {
    background: var(--soft);
    padding: 22px;
    margin-bottom: 16px;
}

.menu-row {
    display: grid;
    grid-template-columns: 58px 1fr 20px;
    gap: 14px;
    align-items: center
}
.menu-icon {
    color: var(--blue-2)
}

.menu-row h3 {
    font-size: 15px;
    margin: 0 0 5px;
    font-weight: 700;
}

.menu-row p {
    font-size: 14px;
    color: #888;
    margin: 0;
}

.menu-row i.bi-chevron-right {
    color: #999;
    font-size: 20px
}

.tabs-line {
    display: flex;
    width: 100%;
    border-bottom: 4px solid #e8e8eb;
    margin-top: 12px;
}

.tabs-line .nav-item {
    flex: 1;
}

.tabs-line .nav-link {
    width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #a9a9b1;
    font-size: 16px;
    padding: 14px 5px 12px;
    position: relative;
    text-align: center;
}

.tabs-line .nav-link:hover,
.tabs-line .nav-link:focus {
    border: 0;
    color: #050472;
}

.tabs-line .nav-link.active {
    color: #003cff;
    background: transparent;
    border: 0;
}

.tabs-line .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 4px;
    background: #003cff;
}

.complaint-bottom {
    background: var(--navy);
    color: #fff;
    padding: 26px 18px;
    margin: 0 -14px
}

.plus-btn {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--blue-2);
    border: 0;
    color: #fff;
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 245px 0 28px 4px;
    padding-bottom: 9px;
}

.notification {
    display: grid;
    grid-template-columns: 72px 1fr 24px;
    gap: 12px;
    align-items: center;
    background: var(--soft);
    padding: 16px 8px;
    margin: 0 0 16px
}

.notification .n-icon {
    font-size: 52px;
    color: var(--blue-2)
}
.titleCon{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.titleCon small{}

.notification h3 {
    font-size: 14px;
    margin: 0;
    color: #22206e;
    font-weight: 700
}

.notification p {
    font-size: 13px;
    color: #888;
    margin: 3px 0;
    line-height: 1.3
}

.notification small {
    font-size: 10px;
    color: #003cff;
    font-weight: 700;
    white-space: nowrap
}

.modal-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .32);
    display: grid;
    place-items: center;
    padding: 14px;
    z-index: 100
}

.dialog {
    width: 100%;
    background: var(--navy);
    color: #fff;
    padding: 42px 30px;
    text-align: center;
    position: relative
}

.dialog .close {
    position: absolute;
    left: 18px;
    top: 14px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 34px
}

.dialog .hero-icon {
    font-size: 90px;
    color: #777cff
}

.dialog h2 {
    font-size: 32px;
    font-weight: 400
}

.dialog p {
    font-size: 13px;
    line-height: 1.7
}

.sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    color: #222;
    z-index: 100;
    border-radius: 22px 22px 0 0;
    overflow: hidden;
    box-shadow: 0 -18px 40px rgba(0, 0, 0, .16)
}

.sheet-title {
    text-align: center;
    background: #f4f4f9;
    padding: 20px;
    font-size: 19px
}

.sheet-option {
    padding: 20px 24px;
    border-bottom: 1px solid #ececf2;
    color: #999;
    display: flex;
    justify-content: space-between
}

.sheet-option.active {
    color: var(--blue);
    font-weight: 600
}

.date-picker {
    height: 340px;
    display: grid;
    place-items: center;
    color: #777
}

.date-wheel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 74%;
    text-align: center;
    font-size: 20px;
    line-height: 1.8
}

.date-wheel .selected {
    font-size: 26px;
    color: #333;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee
}

.otp {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 44px 4px 26px
}

.otp input {
    height: 64px;
    border: 0;
    background: #fff;
    color: #333;
    text-align: center;
    font-size: 20px
}

.upload-box {
    background: #fff;
    color: #20206c;
    min-height: 160px;
    display: grid;
    place-items: center;
    text-align: center;
    margin-top: 34px
}

.upload-box i {
    display: block;
    font-size: 50px;
    color: var(--blue)
}

@media (min-width:431px) {
    .app-shell {
        min-height: 900px;
        box-shadow: 0 20px 70px rgba(18, 24, 64, .13)
    }

    .screen,
    .splash {
        min-height: 900px
    }
}


/* v2 refinements */
.asset-icon {
    display: block;
    width: 84px;
    height: 84px;
    object-fit: contain;
    object-position: center
}

.service-card .asset-icon {
    width: 104px;
    height: 104px
}

.profile-image {
    width: 128px;
    height: 128px;
    object-fit: contain;
    display: block
}

.notification .asset-icon {
    width: 66px;
    height: 66px
}

.logo-image {
    width: 100%;
    max-width: 338px;
    height: auto;
    display: block;
    object-fit: contain
}

.splash-logo {
    width: 92%;
    max-width: 365px;
    margin: 0 auto;
    opacity: .98
}

.ios-header .placeholder {
    width: 44px;
    height: 44px;
    display: none;
}

.service-card {
    cursor: pointer
}

button.service-card {
    color: inherit
}

.menu-row[data-go] {
    cursor: pointer
}


/* ============================================================
   CITC — 4 replacement/new screens
   APPEND THIS BLOCK AT THE END OF assets/css/app.css
   Existing rules are NOT modified.
   ============================================================ */

/* shared */
.rep-screen{
    padding-left:14px;
    padding-right:14px;
}
.rep-screen .ios-header{
    margin-bottom:10px;
}
.rep-screen .ios-header .title{
    color:#084bc8;
    font-weight:500;
}
.rep-tabs{
    display:flex;
    width:100%;
    border-bottom:3px solid #d2d2d5;
    margin:10px 0 28px;
}
.rep-tabs .nav-item{flex:1}
.rep-tabs .nav-link{
    width:100%;
    border:0;
    border-radius:0;
    background:transparent;
    color:#aaa;
    text-align:center;
    font-size:15px;
    padding:10px 6px 11px;
    position:relative;
}
.rep-tabs .nav-link.active{
    background:transparent;
    color:#0846d9;
}
.rep-tabs .nav-link.active::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:-3px;
    height:3px;
    background:#0846e9;
}

/* ------------------------------------------------------------
   1) complaint-stage.html replacement
   ------------------------------------------------------------ */
.rep-stage-card{
    background:#efeff5;
    margin-top:12px;
}
.rep-stage-top{
    display:grid;
    grid-template-columns:1fr 145px;
    gap:12px;
    padding:18px 18px 14px;
    align-items:center;
}
.rep-stage-logo{
    width:145px;
    height:215px;
    background:#fff;
    display:grid;
    place-items:center;
}
.rep-stage-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.rep-stage-date{
    font-size:14px;
    color:#17194f;
    margin-bottom:3px;
}
.rep-stage-line{
    font-size:15px;
    color:#14164b;
    line-height:1.35;
    margin-bottom:5px;
}
.rep-stage-line strong{
    color:#11134f;
}
.rep-stage-line .blue{
    color:#0950e8;
}
.rep-stage-number{
    font-size:28px;
    line-height:1.1;
    color:#5d5d62;
    margin:3px 0 8px;
}
.rep-stage-alert{
    background:#50b6e4;
    color:#fff;
    padding:6px 10px;
    text-align:center;
    font-size:14px;
    margin-top:10px;
}
.rep-stage-section{
    border-top:1px solid #cfcfd4;
    padding:18px;
}
.rep-stage-section h3{
    font-size:17px;
    color:#11134d;
    font-weight:700;
    margin:0 0 14px;
}
.rep-stage-section ul{
    margin:0;
    padding-left:20px;
}
.rep-stage-section li{
    color:#66666c;
    font-size:14px;
    margin-bottom:8px;
    line-height:1.35;
}
.rep-stage-section li strong{
    color:#11134d;
}

/* ------------------------------------------------------------
   2) offers.html replacement
   ------------------------------------------------------------ */
.rep-offers-header{
    display:grid;
    grid-template-columns:44px 1fr 70px;
    align-items:center;
    margin-bottom:8px;
}
.rep-offers-title{
    text-align:center;
    color:#0846cf;
    font-size:20px;
    font-weight:500;
}
.rep-offers-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    color:#808080;
    font-size:23px;
}
.rep-offers-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px 12px;
}
.rep-offer-card{
    background:#efeff4;
    border:1px solid #e9e9ed;
    min-height:183px;
    padding:10px 11px 11px;
}
.rep-offer-top{
    min-height:58px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}
.rep-provider{
    font-size:25px;
    font-weight:800;
    line-height:1;
    text-transform:lowercase;
}
.rep-provider small{
    display:block;
    font-size:9px;
    color:#737378;
    font-weight:600;
    margin-bottom:3px;
}
.rep-provider.mobily{color:#17a6d0}
.rep-provider.zain{color:#87b93d}
.rep-provider.stc{color:#542078}
.rep-heart{
    width:27px;
    height:27px;
    border-radius:50%;
    border:0;
    background:#fff;
    color:#47c9df;
    display:grid;
    place-items:center;
    padding:0;
}
.rep-offer-name{
    font-size:12px;
    font-weight:700;
    color:#17184e;
    margin-top:4px;
    line-height:1.2;
}
.rep-offer-duration{
    font-size:9px;
    color:#6b6b70;
    margin-bottom:8px;
}
.rep-offer-stats{
    display:grid;
    grid-template-columns:1fr 1px 1fr;
    gap:8px;
    align-items:center;
    text-align:center;
}
.rep-offer-divider{
    width:1px;
    height:39px;
    background:#94949a;
}
.rep-offer-stat i{
    display:block;
    font-size:24px;
    line-height:1;
    color:#102ddf;
    margin-bottom:4px;
}
.rep-offer-stat strong{
    display:block;
    color:#17184e;
    font-size:11px;
    line-height:1;
}
.rep-offer-stat span{
    display:block;
    color:#17184e;
    font-size:10px;
    line-height:1.1;
}

/* ------------------------------------------------------------
   3) contact-us.html new page
   ------------------------------------------------------------ */
.rep-contact-title{
    color:#0847cc;
    font-size:27px;
    font-weight:400;
    text-align:center;
}
.rep-branches{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-top:44px;
}
.rep-branch{
    background:#efeff5;
}
.rep-branch-head{
    min-height:108px;
    display:grid;
    grid-template-columns:35px 1fr 50px;
    align-items:center;
    gap:10px;
    padding:18px;
    cursor:pointer;
}
.rep-branch-head > i:first-child{
    color:#949494;
    font-size:20px;
}
.rep-branch-name{
    text-align:right;
    color:#11134f;
    font-size:21px;
}
.rep-pin{
    width:42px;
    height:42px;
    border:4px solid #817cff;
    border-radius:50% 50% 50% 0;
    transform:rotate(-45deg);
    position:relative;
    margin-left:auto;
}
.rep-pin::after{
    content:"";
    width:12px;
    height:12px;
    border:3px solid #817cff;
    border-radius:50%;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
.rep-branch-body{
    padding:0 18px 18px;
    color:#171717;
    font-size:14px;
}
.rep-branch-body p{
    margin:0 0 14px;
    line-height:1.35;
}
.rep-branch-mark{
    color:#f5bf32;
    font-weight:800;
}
.rep-map{
    width:100%;
    display:block;
    margin-top:12px;
}

/* ------------------------------------------------------------
   4) complaint-details.html new page
   ------------------------------------------------------------ */
.rep-detail-summary,
.rep-detail-section{
    background:#efeff5;
}
.rep-detail-summary{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:12px;
    padding:24px 22px;
    border-bottom:1px solid #cfcfd5;
}
.rep-detail-logo{
    width:120px;
    min-height:145px;
    background:#fff;
}
.rep-detail-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.rep-detail-meta{
    position:relative;
    min-width:0;
}
.rep-detail-date{
    position:absolute;
    right:0;
    top:0;
    font-size:13px;
    color:#13144d;
}
.rep-detail-no{
    color:#15164f;
    font-size:14px;
    margin:0 0 8px;
    padding-right:80px;
}
.rep-detail-no a{
    color:#0647ea;
}
.rep-detail-phone{
    color:#5f5f64;
    font-size:28px;
    line-height:1;
    margin:0 0 13px;
}
.rep-detail-stage{
    color:#11134e;
    font-size:15px;
    margin:0;
}
.rep-detail-stage span{
    color:#7a86dc;
}
.rep-detail-section{
    padding:22px;
    margin-bottom:24px;
}
.rep-detail-section h3{
    color:#11134e;
    font-size:14px;
    font-weight:700;
    margin:0 0 16px;
}
.rep-detail-list{
    list-style:none;
    margin:0;
    padding:0;
}
.rep-detail-list li{
    position:relative;
    padding-left:18px;
    color:#68686e;
    font-size:15px;
    margin-bottom:10px;
    line-height:1.25;
}
.rep-detail-list li::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:#68686e;
    position:absolute;
    left:2px;
    top:7px;
}
.rep-detail-list strong{
    color:#17184f;
}

@media(max-width:390px){
    .rep-stage-top{grid-template-columns:1fr 125px}
    .rep-stage-logo{width:125px;height:175px}
    .rep-detail-summary{grid-template-columns:105px 1fr;padding:20px 16px}
    .rep-detail-logo{width:105px;min-height:130px}
    .rep-detail-phone{font-size:25px}
    .rep-offers-grid{gap:10px 8px}
    .rep-offer-card{padding:9px}
}








/* ============================================================
   complaints.html replacement only
   APPEND TO THE END OF app.css
   Existing styles are not changed.
   ============================================================ */

.complaints-list-screen{
    padding-bottom:250px;
}

.complaints-service-icon{
    margin-bottom:8px;
}

.complaints-main-tabs{
    margin-top:4px;
    margin-bottom:18px;
}

.complaints-tabs-content{
    min-height:350px;
}

.complaints-list{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding-top:8px;
}

.complaint-list-card{
    position:relative;
    background:#f0f0f6;
    border:1px solid #ececf0;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
}

.complaint-list-card:active{
    transform:scale(.99);
}

.complaint-card-top{
    display:grid;
    grid-template-columns:92px 1fr 22px;
    gap:12px;
    align-items:center;
    min-height:138px;
    padding:14px 12px;
}

.complaint-card-logo{
    width:92px;
    height:106px;
    background:#fff;
    display:grid;
    place-items:center;
}

.complaint-provider-logo{
    font-weight:800;
    line-height:1;
    text-align:center;
}

.stc-logo-text{
    color:#542078;
    font-size:43px;
    letter-spacing:-4px;
}

.mobily-logo-text{
    color:#16a5d1;
    font-size:18px;
}

.zain-logo-text{
    color:#84b73e;
    font-size:25px;
    text-transform:lowercase;
}

.complaint-card-content{
    min-width:0;
}

.complaint-card-date{
    font-size:11px;
    color:#15174c;
    margin-bottom:4px;
}

.complaint-card-number{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    align-items:center;
    font-size:12px;
    color:#15174c;
    line-height:1.25;
}

.complaint-card-number strong{
    color:#064ce6;
    font-weight:600;
}

.complaint-card-phone{
    font-size:23px;
    color:#606065;
    line-height:1.1;
    margin:4px 0 7px;
}

.complaint-card-stage{
    font-size:12px;
    line-height:1.3;
    color:#17184d;
}

.complaint-card-stage strong{
    font-weight:700;
}

.complaint-card-stage span{
    color:#7582d8;
}

.complaint-card-arrow{
    color:#9b9ba0;
    font-size:18px;
}

.complaint-card-action{
    margin-top:10px;
    background:#50b6e4;
    color:#fff;
    text-align:center;
    padding:5px 6px;
    font-size:12px;
}

.complaints-plus-btn{
    margin-top:24px;
    margin-bottom:26px;
}

.complaints-info-box{
    margin-top:0;
}

@media(max-width:390px){
    .complaint-card-top{
        grid-template-columns:80px 1fr 18px;
        gap:9px;
        padding:12px 10px;
    }

    .complaint-card-logo{
        width:80px;
        height:96px;
    }

    .stc-logo-text{
        font-size:38px;
    }

    .complaint-card-phone{
        font-size:21px;
    }
}