/* Existing styles... */
body {
    font-family: sans-serif;
    margin: 0;
    background-color: #f0f2f5;
    color: #333;
}

header {
    background-color: #005a87;
    color: white;
    padding: 1rem;
    text-align: center;
}

main {
    padding: 1rem;
}

#player-container {
    position: sticky;
    top: 0;
    background-color: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    margin-bottom: 1.5rem;
}

#current-doa-title {
    margin-top: 0;
}

#audio-player {
    width: 100%;
}

.ritual-section {
    background-color: white;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* Perbaikan titik doa agar selalu terlihat */
.interactive-map-container {
    position: relative;
    max-width: 100%;
    margin: auto;
    overflow: visible !important; /* pastikan titik tidak terpotong */
    z-index: 0;
}

.interactive-map-container img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.doa-point {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: rgba(255, 0, 0, 0.9) !important;
    border-radius: 50%;
    border: 2px solid white;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: transform 0.2s, background-color 0.2s;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    z-index: 9999 !important;

    /* BARIS PENTING UNTUK POSISI */
    top: calc(var(--top-percent) * 1%);
    left: calc(var(--left-percent) * 1%);
}

.doa-point:hover {
    transform: translate(-50%, -50%) scale(1.5);
    background-color: rgba(255, 87, 34, 1) !important;
}

.doa-point .tooltip {
    visibility: hidden;
    width: 160px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -80px;
    opacity: 0;
    transition: opacity 0.3s;
}

.doa-point:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.star-icon {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 24px;
}

/* Specific Point Positions (using CSS variables for JS) */
#miqat-point { --top-percent: 56; --left-percent: 25; }
#makkah-point { --top-percent: 8; --left-percent: 38; }
#masjidil-haram-point { --top-percent: 12; --left-percent: 83; }
#ihram-point { --top-percent: 60; --left-percent: 64; }
#talbiyah-point { --top-percent: 45; --left-percent: 18; }
#kabah-view-point { --top-percent: 30; --left-percent: 75; }
#perjalanan-point { --top-percent: 86; --left-percent: 70; }
#keluar-rumah-point { --top-percent: 75; --left-percent: 28; }

#hajar-aswad-point { --top-percent: 54.5; --left-percent: 30.3; }
#rukun-yamani-point { --top-percent: 18.5; --left-percent: 11.5; }
#antara-rukun-hajar-point { --top-percent: 42; --left-percent: 5.5; }
#maqam-ibrahim-point { --top-percent: 71; --left-percent: 75.5; }
#tawaf-path-point { --top-percent: 56.3; --left-percent: 40; }
#tawaf-path-point-2 { --top-percent: 64; --left-percent: 30; }
#tawaf-path-point-3 { --top-percent: 68.7; --left-percent: 35; }
#tawaf-path-point-4 { --top-percent: 72.8; --left-percent: 40; }
#tawaf-path-point-5 { --top-percent: 76.5; --left-percent: 45; }
#tawaf-path-point-6 { --top-percent: 80.5; --left-percent: 50; }
#tawaf-path-point-7 { --top-percent: 84; --left-percent: 55; }
#solat-tawaf-point { --top-percent: 94; --left-percent: 94; }
#zamzam-point { --top-percent: 94; --left-percent: 86; }

/* BAB 3 - Doa Sa'i dan Tahallul */
#safa-start-point { --top-percent: 47; --left-percent: 80.5; }
#safa-kabah-view-point { --top-percent: 54; --left-percent: 83.5; }
#green-area-point { --top-percent: 35; --left-percent: 57.5; }
#marwah-approach-point { --top-percent: 47; --left-percent: 20; }
#sai-lap-1-point { --top-percent: 45.5; --left-percent: 70; }
#sai-lap-2-point { --top-percent: 66.5; --left-percent: 20; }
#sai-lap-3-point { --top-percent: 43.3; --left-percent: 73; }
#sai-lap-4-point { --top-percent: 65.7; --left-percent: 24.5; }
#sai-lap-5-point { --top-percent: 41; --left-percent: 76; }
#sai-lap-6-point { --top-percent: 63.5; --left-percent: 29; }
#sai-lap-7-point { --top-percent: 40; --left-percent: 79.5; }
#sai-finish-point { --top-percent: 59; --left-percent: 17.5; }
#tahallul-point { --top-percent: 85; --left-percent: 12; }
#tahallul-finish-point { --top-percent: 85; --left-percent: 20; }
#safa-approach-point { --top-percent: 61; --left-percent: 82; }
#green-area-point-2 { --top-percent: 73; --left-percent: 57; }

/* Warna khusus untuk titik-titik BAB 3 */
#safa-start-point,
#sai-finish-point {
    background-color: rgba(0, 128, 0, 0.7) !important; /* hijau */
}

#safa-kabah-view-point {
    background-color: rgba(128, 0, 128, 0.7) !important; /* ungu */
}

#green-area-point,
#tahallul-point,
#tahallul-finish-point {
    background-color: rgba(255, 165, 0, 0.7) !important; /* orange */
}

#marwah-approach-point {
    background-color: rgba(0, 0, 255, 0.7) !important; /* biru */
}

#sai-lap-1-point,
#sai-lap-2-point,
#sai-lap-3-point,
#sai-lap-4-point,
#sai-lap-5-point,
#sai-lap-6-point,
#sai-lap-7-point {
    background-color: rgba(255, 255, 0, 0.7) !important; /* kuning */
}

/* Warna khusus untuk titik-titik Tawaf */
#hajar-aswad-point {
    background-color: rgba(128, 0, 128, 0.7) !important; /* purple */
}

#rukun-yamani-point {
    background-color: rgba(0, 0, 255, 0.7) !important; /* blue */
}

#antara-rukun-hajar-point {
    background-color: rgba(0, 128, 0, 0.7) !important; /* green */
}

#tawaf-path-point,
#tawaf-path-point-2,
#tawaf-path-point-3,
#tawaf-path-point-4,
#tawaf-path-point-5,
#tawaf-path-point-6,
#tawaf-path-point-7 {
    background-color: rgba(255, 255, 0, 0.7) !important; /* kuning */
}

#solat-tawaf-point,
#zamzam-point {
    background-color: rgba(255, 165, 0, 0.7) !important; /* orange */
}

/* Warna khusus untuk titik-titik BAB 1 */
#miqat-point,
#ihram-point {
    background-color: rgba(0, 0, 255, 0.7) !important; /* biru */
}

#makkah-point {
    background-color: rgba(128, 0, 128, 0.7) !important; /* ungu */
}

#masjidil-haram-point {
    background-color: rgba(255, 0, 0, 0.7) !important; /* merah */
}

#talbiyah-point {
    background-color: rgba(255, 165, 0, 0.7) !important; /* orange */
}

#kabah-view-point,
#keluar-rumah-point {
    background-color: rgba(0, 128, 0, 0.7) !important; /* hijau */
}

#perjalanan-point {
    background-color: rgba(165, 42, 42, 0.7) !important; /* brown */
}

/* Tombol Doa Lainnya */
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

#ab-repeat-container {
    margin-top: 1rem;
    border-top: 1px solid #eee;
    padding-top: 1rem;
}

.ab-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.ab-repeat-buttons {
    display: flex;
    gap: 10px;
}

.ab-fine-tune {
    display: flex;
    justify-content: space-around;
    gap: 10px;
    margin-bottom: 10px;
}

.ab-controls button, .fine-tune-group button {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f0f0f0;
    cursor: pointer;
}

.fine-tune-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

.fine-tune-group span {
    font-weight: bold;
    font-size: 0.9em;
}

#next-segment-btn {
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f0f0f0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#speed-control-container {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: #f8f9fa;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

#speed-control {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    min-width: 70px;
}

.doa-button {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    text-align: center;
    flex-grow: 1;
}

.doa-button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

.star-icon {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    animation: none !important;
}