/* ==========================================================================
   Competition Details Section (Replicated from Image)
   ========================================================================== */

.competition-details {
    padding: 80px 0;
    direction: rtl;
    background-color: #fff;
    font-family: var(--font-main);
}

.details-part {
    margin-bottom: 40px;
}

.details-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 40px;
    gap: 15px;
}

.details-title-wrapper.vertical {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 8px;
    width: fit-content;
    margin-right: 0;
    margin-left: auto; /* Pushes to the right */
}

.details-title {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0 !important;
}

.details-title span {
    display: block;
    white-space: nowrap;
}

.details-title .line-1 {
    font-size: 1.8rem;
    text-align: right;
}

.details-title .line-2 {
    font-size: 2rem;
    font-weight: 800;
}

.details-title-line {
    height: 1px;
    background-color: #b58c6d;
    flex: 1;
    max-width: 150px;
}

.details-title-wrapper.vertical .details-title-line {
    width: 100%; /* Matches the width of the stretched text */
    height: 4px;
    background-color: #b58c6d;
    flex: none;
}

/* Target Groups */
.target-groups-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.target-groups-list {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    padding: 0;
    list-style: none;
}

.target-groups-list.row-1 {
    justify-content: center;
}

.target-groups-list.row-2 {
    justify-content: center;
}

.target-groups-list li {
    position: relative;
    padding-right: 25px;
    color: #b58c6d;
    font-size: 1.1rem;
    font-weight: 600;
}

.target-groups-list li::before {
    content: '';
    position: absolute;
    right: 0;
    top: 14px;
    transform: translateX(0) rotate(45deg);
    width: 10px;
    height: 10px;
    background-color: #004b50;
}

/* Divider Ornament */
.details-divider-ornament {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 60px 0;
}

.ornament-line {
    height: 1px;
    background-color: #b58c6d;
    flex: 1;
}

.ornament-diamond {
    width: 12px;
    height: 12px;
    background-color: #b58c6d;
    transform: rotate(45deg);
}

/* Branches Grid */
.branches-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    background-color: #b58c6d; /* Background acts as border color (Gold) */
    gap: 1px; /* The gap creates the internal borders */
}

.branch-item {
    background-color: #fff;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 250px;
}

.branch-badge {
    position: relative;
    width: 80px;
    height: 100px;
    margin-bottom: 20px;
}

.badge-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.badge-label {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Old icon styles removed */

.branch-name {
    font-size: 1.25rem !important;
    color: #004b50 !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}

.branch-desc {
    font-size: 0.95rem;
    color: #004b50;
    margin: 0;
}

.branch-note {
    font-size: 0.85rem;
    color: #b58c6d;
    margin-top: 8px;
    font-weight: 600;
}

/* Prizes Section Styles */
.prizes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: #b58c6d; /* Gold gap for internal lines */
    gap: 1px;
    margin-top: 40px;
}

.prize-table-card {
    background-color: #fff;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.prize-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.prize-table th {
    background-color: #004b50;
    color: #fff;
    padding: 10px;
    font-size: 0.9rem;
    font-weight: 700;
}

.prize-table td {
    padding: 12px 4px;
    border: 1px solid #b58c6d;
    font-size: 1rem;
    color: #004b50;
    font-weight: 600;
    text-align: center;
    direction: rtl !important; /* Force RTL context for numbers and symbols */
    unicode-bidi: embed;
}

/* For the prize amount cells */
.prize-table td:nth-child(2),
.prize-table td:nth-child(3) {
    white-space: nowrap;
    min-width: 90px; /* Ensure enough width for number + symbol */
}

.prize-table td:first-child {
    background-color: #f9fafb;
    width: 30%;
}

.prize-table .amount {
    color: #004b50;
}

.sar-icon {
    height: 1.1em;
    width: auto;
    vertical-align: middle;
    margin-right: 4px;
    /* This filter approximates #b58c6d (the gold color) */
    filter: invert(61%) sepia(12%) saturate(986%) hue-rotate(344deg) brightness(91%) contrast(88%);
}

.currency {
    display: inline-flex;
    align-items: center;
}

.sar-symbol {
    font-size: 0 !important; /* Hides fallback text like "ر.س" */
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.sar-symbol::before {
    content: "";
    display: inline-block;
    width: 1.1rem; /* Using rem to avoid zero-size issue on iOS */
    height: 1.1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1124.14 1256.39'%3E%3Cpath fill='%23cda869' d='M699.62,1113.02h0c-20.06,44.48-33.32,92.75-38.4,143.37l424.51-90.24c20.06-44.47,33.31-92.75,38.4-143.37l-424.51,90.24Z'/%3E%3Cpath fill='%23cda869' d='M1085.73,895.8c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.33v-135.2l292.27-62.11c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.27V66.13c-50.67,28.45-95.67,66.32-132.25,110.99v403.35l-132.25,28.11V0c-50.67,28.44-95.67,66.32-132.25,110.99v525.69l-295.91,62.88c-20.06,44.47-33.33,92.75-38.42,143.37l334.33-71.05v170.26l-358.3,76.14c-20.06,44.47-33.32,92.75-38.4,143.37l375.04-79.7c30.53-6.35,56.77-24.4,73.83-49.24l68.78-101.97v-.02c7.14-10.55,11.3-23.27,11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 4px;
}

/* Prizes Footer */
.prizes-total-footer {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.total-content {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 40px;
    border: 2px solid #b58c6d;
    border-radius: 50px;
    background-color: #fcf9f6;
}

.total-icon {
    width: 60px;
    height: auto;
}

.total-text {
    font-size: 1.8rem;
    color: #004b50;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    direction: rtl;
}

.total-amount {
    color: #b58c6d;
    font-size: 2.2rem;
    margin: 0;
}

@media (max-width: 991px) {
    .branches-grid,
    .prizes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .total-text {
        font-size: 1.4rem;
    }
    .total-amount {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .branches-grid,
    .prizes-grid {
        grid-template-columns: 1fr;
    }
    
    .target-groups-list {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .target-group-item {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .total-content {
        flex-direction: column;
        padding: 25px 15px;
        text-align: center;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .total-text {
        font-size: 1rem;
        flex-wrap: wrap;
        justify-content: center;
        line-height: 1.6;
        display: flex;
        flex-direction: row; /* Ensure row layout */
        column-gap: 8px;
    }

    .total-amount, .currency {
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
    }

    /* Keep amount and icon together */
    .total-text .total-amount + .currency {
        margin-right: -4px; /* Tighten gap */
    }

    .total-amount {
        font-size: 1.4rem;
        white-space: nowrap;
    }
    
    .details-title-wrapper.vertical {
        align-items: center;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
}