body { font-family: 'Montserrat', Arial, sans-serif; text-align: center; background: #111; margin:0; direction: rtl; color: #D9D9D9;}

* {
  box-sizing: border-box;
}

/* Guess progress animation (reverted) */
#guess-progress {margin:0 auto 10px auto; max-width:350px;}
/* Constrain overall search area (reverted compact width) */
#search-container {max-width:350px; margin:22px auto 0 auto; position:relative;}
#search-input-wrapper {
  position: relative;
  width: 100%;
}

#city-search {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  background: #1F2023;
  color: #D9D9D9;
  border: 2px solid #232323;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 16px;
  text-align: right;
  direction: rtl;
  transition: border-color 0.3s, box-shadow 0.3s;
}

#city-search:focus {
  outline: none;
  border-color: #1B9E49;
  box-shadow: 0 0 10px rgba(27, 158, 73, 0.3);
}

/* --- Mobile / iPhone Consistency Tweaks (do not affect desktop) --- */
@media (max-width: 600px) {
  #search-container {
    width: 90vw;
    margin: 18px auto 0 auto;
  }
  #city-search {
    font-size: 16px !important; /* prevent iOS zoom */
    -webkit-tap-highlight-color: transparent;
    background: #1F2023 !important;
    color: #D9D9D9 !important;
    border: 2px solid #232323 !important;
  }

  #city-search:focus {
    border-color: #1B9E49 !important;
    box-shadow: 0 0 10px rgba(27, 158, 73, 0.3) !important;
  }

  #dropdown {
    border-radius: 12px;
    background: #1F2023 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: dropdown-fade-in 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
}

@keyframes dropdown-fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Extra small phones: gently shrink squares so they fit without wrapping */
@media (max-width:480px){
    .gp-bar-wrapper{min-height:42px;padding:4px 6px 4px 50px;}
    .gp-squares .sq{width:36px;height:36px;margin:2px;}
    .gp-status-icons{min-width:38px;}
    .gp-percent{font-size:0.8em;}
}
/* iOS specific capability query for safety (overrides if Safari mobile) */
@supports (-webkit-touch-callout: none){
    #city-search{border-radius:12px !important;}
    .gp-bar-wrapper{backface-visibility:hidden;}
}
.gp-bar-wrapper {position:relative; min-height:48px; background:#1b1b1b; border:2px solid #1B9E49; border-radius:12px; overflow:hidden; direction:ltr; display:flex; align-items:center; padding:6px 10px; gap:10px;}
.gp-squares {position:absolute; top:0; right:0; bottom:0; left:0; display:flex; flex-direction:row-reverse;}
.gp-squares .sq {width:44px; height:44px; background:#0f5228; opacity:0; transform:translateX(24px) scale(0.7); margin:3px; border-radius:6px; flex:0 0 auto;}
.gp-bar-wrapper {display:flex; align-items:center; padding:6px 6px 6px 54px; box-sizing:border-box;}
.gp-squares {display:flex; flex-direction:row-reverse; justify-content:flex-start;}
@keyframes squareIn {0% {opacity:0; transform:translateX(28px) scale(0.5);} 55% {opacity:1; transform:translateX(0) scale(1.05);} 100% {opacity:1; transform:translateX(0) scale(1);} }
.gp-squares .sq.appear {animation: squareIn 0.7s cubic-bezier(.25,.8,.3,1);}
.gp-squares .sq.green {background:#1B9E49;}
.gp-squares .sq.yellow {background:#c9a300;}
.gp-squares .sq.red {background:#b3261e;}
.gp-squares .sq.empty {background:#262626; opacity:0.6; animation:none; transform:none;}
.gp-status-icons {display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; min-width:42px;}
.gp-status-icons span {display:block; font-size:1.3em; line-height:1;}
.gp-emoji {filter:drop-shadow(0 0 4px rgba(0,0,0,0.4));}
.gp-arrow {font-size:1.1em; opacity:0.85;}
.gp-percent {position:static; transform:none; left:auto; top:auto; font-size:0.95em; order:3; margin-left:auto;}
.gp-squares {flex:1; display:flex; flex-direction:row-reverse; justify-content:flex-start;}
.gp-percent {position:absolute; left:8px; top:50%; transform:translateY(-50%); font-size:0.9em; font-weight:bold; color:#D9D9D9;}
@keyframes squareIn {0% {opacity:0; transform:translateX(24px) scale(0.4);} 60% {opacity:1; transform:translateX(0) scale(1.05);} 100% {opacity:1; transform:translateX(0) scale(1);} }
@keyframes pulseGreen {0% {box-shadow:0 0 0 0 rgba(27,158,73,0.6);} 70% {box-shadow:0 0 0 8px rgba(27,158,73,0);} 100% {box-shadow:0 0 0 0 rgba(27,158,73,0);} }
.gp-squares .sq.active {background:#1B9E49; animation: squareIn 0.6s forwards, pulseGreen 1.2s ease 0.2s;}

        /* FAQ section mobile styles */
        #faq-section {
            max-width: 800px;
            margin: 32px auto 0 auto;
            padding: 18px 12px;
            background: #232323;
            border-radius: 24px;
            box-shadow: 0 0 12px #222;
            text-align: right;
        }
        @media (max-width: 600px) {
            #faq-section {
                max-width: 98vw;
                margin: 18px auto 0 auto;
                padding: 8px 4px;
                border-radius: 14px;
            }
            #faq-section ul {
                font-size: 0.97em !important;
                line-height: 1.5 !important;
                padding-left: 0;
                margin-left: 0;
            }
            #faq-section h3 {
                font-size: 1.1em !important;
            }
        }
        .dark-mode { background: #111; color: #D9D9D9; }
        .light-mode { background: #fff; color: #232323; }
          #top-bar {
            width: 100%;
            background: #232323;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px; /* Add padding for spacing */
            height: 56px;
            box-sizing: border-box;
            position: sticky;
            top: 0;
            z-index: 1001;
            border-bottom: 2px solid #232323;
           
        }
        #site-title {
            flex: 1;
            text-align: center;
            font-size: 2em;
            font-weight: bold;
            color: #fff;
            letter-spacing: 2px;
        }
        .green-le { color: #1B9E49; }
        .top-bar-section {
            display: flex;
            align-items: center;
            flex: 1; /* This makes the side sections take up equal space, centering the title */
        }
        #top-bar-left {
            justify-content: flex-end; /* Aligns items to the LEFT in RTL */
        }
        #top-bar-right {
            justify-content: flex-start; /* Aligns items to the RIGHT in RTL */
            gap: 4px;
        }
        .top-bar-section button {
            background: #111;
            color: #fff;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            font-size: 1.5em;
            cursor: pointer;
            margin: 0 2px;
            transition: background 0.2s, color 0.2s, transform 0.2s;
            outline: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        /* Hide the mobile settings button by default */
         #settings-top-btn-mobile {
            display: none !important;
        }

        /* --- START: Animation & Effects --- */

        /* 1. Add hover and active (click) effects for top bar buttons */
        .top-bar-section button:hover {
            background: #232323;
            color: #1B9E49;
            transform: scale(1.08);
        }
        .top-bar-section button:active {
            transform: scale(0.95);
            transition: transform 0.1s ease;
        }

        /* 2. Add a more pronounced active (click) effect for main buttons */
        .main-action-btn:active,
        #prev-city-btn:active {
            transform: scale(0.98) !important;
        }

        /* 3. Add fade-in animation to popups */
        #popup, #win-popup, #settings-popup, #city-list-popup {
            animation: fadeInScale 0.3s ease-out;
        }

        /* 4. Add fade-in animation to result/hint cards */
        .result-card {
            animation: fadeIn 0.5s ease-out;
        }

        /* 5. Add fade-in animation to the image gallery */
        #gallery {
            animation: fadeIn 0.5s ease-out;
        }

        /* Keyframe definitions for the animations */
        @keyframes fadeInScale {
            from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
            to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        #city-nav-bar {
            margin: 24px auto 0 auto; max-width: 880px; display: flex; align-items: center; justify-content: center;
        }
        #prev-city-btn, .main-action-btn {
            background: #1B9E49;
            color: #fff;
            border: none;
            border-radius: 18px;
            font-size: 1.1em;
            padding: 8px 18px;
            cursor: pointer;
            margin: 12px 0;
            box-shadow: none;
            transition: background 0.2s, color 0.2s, transform 0.2s;
            outline: none;
            display: inline-block;
        }
        .main-action-btn:active,
        .main-action-btn:focus,
        .main-action-btn:hover,
        #prev-city-btn:active,
        #prev-city-btn:focus,
        #prev-city-btn:hover {
            background: #157a36;
            color: #fff;
            transform: scale(1.05);
        }
        #image-container { position: relative; display: inline-block; margin-top: 20px; }
        #main-image {
            width: 100vw;
            max-width: 880px;
            height: 457px;
            object-fit: contain;
            border-radius: 8px;
            margin-top: 20px;
            display: block;
            margin-left: auto;
            margin-right: auto;
            box-shadow: 0 0 10px #232323;
            transition: box-shadow 0.5s, transform 0.5s, opacity 0.3s
        }
        /* Search input (reverted to original style) */
        #city-search {
            width: 100%;
            padding: 12px 16px;
            font-size: 1em;
            border: 2px solid #232323;
            border-radius: 12px;
            background: #1F2023;
            color: #D9D9D9;
            text-align: right;
            direction: rtl;
            outline: none;
            transition: border-color 0.3s, box-shadow 0.3s;
            box-sizing: border-box;
        }

        /* When dropdown open: fuse borders */
        #search-input-wrapper.open #city-search {border-bottom-left-radius:0;border-bottom-right-radius:0;}
        #search-input-wrapper.open #search-suggestions {display:block;}
        #search-suggestions { -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
        @supports (-webkit-touch-callout:none){
            #search-suggestions {backdrop-filter:blur(4px);} /* iOS visual polish */
        }

            #city-search.has-accuracy {padding-top:32px;}
        
        #city-search:focus {
            border-color: #1B9E49;
            box-shadow: 0 0 10px rgba(27, 158, 73, 0.3);
        }
        
        #city-search::placeholder {
            color: #888;
            font-size: 0.9em;
        }
        
        #search-suggestions {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: #1F2023;
            border: 2px solid #232323;
            border-top: none;
            border-radius: 0 0 12px 12px;
            max-height: 200px;
            overflow-y: auto;
            z-index: 20;
            display: none;
        }
        
        .suggestion-item {
            padding: 10px 16px;
            cursor: pointer;
            border-bottom: 1px solid #333;
            text-align: right;
            direction: rtl;
            transition: background-color 0.2s;
        }
            .suggestion-item.active {background:#1B9E49 !important;color:#fff;}
            .suggestion-item .match {color:#1B9E49;font-weight:bold;}
        
        .suggestion-item:hover {
            background: #2A2A2A;
        }
        
        .suggestion-item:last-child {
            border-bottom: none;
        }
        
        .suggestion-arabic {
            color: #D9D9D9;
            font-weight: bold;
        }
        
        .suggestion-english {
            color: #888;
            font-size: 0.85em;
            margin-top: 2px;
        }
        
        #loading-bar-container {
            width: 100%;
            height: 4px;
            background: #333;
            border-radius: 2px;
            overflow: hidden;
            margin-top: -2px;
        }
        
        #loading-bar {
            height: 100%;
            background: linear-gradient(90deg, #1B9E49, #4CAF50);
            width: 0%;
            border-radius: 2px;
            transition: width 1s ease;
        }
        
        #result-container {
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        #result {
            text-align: center;
            animation: slideIn 0.5s ease;
        }
        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        #popup, #win-popup, #settings-popup, #city-list-popup {
            position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
            background:  #232323; color: #fff; border-radius: 32px; box-shadow: 0 0 20px rgba(0,0,0,0.3);
            z-index: 9999; max-width: 400px; width: 90%; text-align: center; padding: 24px; display: none;
        }
        .result-card, .quiz {
            background:  #232323; color: #fff; border-radius: 32px; border: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.2); display: inline-block; text-align: center; padding: 15px; margin-top: 20px;
        }
        .quiz h3 { margin-top: 0; }
        .quiz button {
            background: #1B9E49;
            color: #fff;
            border: none;
            border-radius: 18px;
            font-size: 1.1em;
            padding: 8px 18px;
            cursor: pointer;
            margin: 5px;
            box-shadow: none;
            transition: background 0.2s, color 0.2s, transform 0.2s;
            outline: none;
            display: inline-block;
        }
        .quiz button:hover:not(:disabled) {
            background: #157a36;
            transform: scale(1.05);
        }
        #loading-bar-container { width:70%;max-width:700px;margin:20px auto 0 auto;display:none; }
        #loading-bar { height:18px;background:linear-gradient(90deg,#1B9E49, #232323);border-radius:8px;width:0%;transition:width 1s;}
        #gallery { display:none; margin: 30px auto; max-width: 900px;}
        @media (max-width: 600px) {
                    #main-image  { width: 90vw; max-width: 420px; height: 210px; }
                    /* Unified mobile search layout */
                    #search-container {position:relative; display:flex; flex-direction:column; align-items:stretch; width:90vw; max-width:350px; margin:18px auto 0 auto;}
                    #guess-progress{margin:0 0 8px 0; width:100%;}
                    #city-search.has-accuracy {padding-top:32px;}
            
            #search-suggestions {
                font-size: 0.9em;
            }
            
            .suggestion-item {
                padding: 8px 14px;
            }
            
            #popup, #win-popup, #settings-popup, #city-list-popup { max-width: 98vw; min-width: 320px; width: 90vw; padding: 16px;}
            #top-bar {
                padding: 0 8px !important;
            }
            #settings-top-btn-mobile {
                display: inline-flex !important; /* Show mobile settings button */
            }
            #settings-top-btn-desktop {
                display: none !important; /* Hide desktop settings button */
            }
            #top-bar-right {
                gap: 2px;
            }
        }
        #site-title {
            flex: 1;
            text-align: center;
            font-size: 2em;
            font-family: 'Montserrat', Arial, sans-serif;
            font-weight: bold;
            letter-spacing: 2px;
            color: #fff;
        }
        .slider-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 28px;
            margin: 12px 0;
        }
        .slider-switch input { display: none; }
        .slider-slider {
            position: absolute;
            cursor: pointer;
            top: 0; left: 0; right: 0; bottom: 0;
            background: #ccc;
            border-radius: 28px;
            transition: .4s;
        }
        .slider-slider:before {
            position: absolute;
            content: "";
            height: 22px;
            width: 22px;
            left: 3px;
            bottom: 3px;
            background: #fff;
            border-radius: 50%;
            transition: .4s;
        }
        .slider-switch input:checked + .slider-slider {
            background: #1B9E49;
        }
        .slider-switch input:checked + .slider-slider:before {
            transform: translateX(22px);
            background: #232323;
        }
        #popup button,
        #win-popup button,
        #settings-popup button,
        #city-list-popup button {
            background: #1B9E49;
            color: #fff;
            border: none;
            border-radius: 18px;
            font-size: 1.1em;
            padding: 8px 18px;
            cursor: pointer;
            margin: 12px 0;
            box-shadow: none;
            transition: background 0.2s, color 0.2s, transform 0.2s;
            outline: none;
            display: inline-block;
        }
        #popup button:active,
        #popup button:focus,
        #popup button:hover,
        #win-popup button:active,
        #win-popup button:focus,
        #win-popup button:hover,
        #settings-popup button:active,
        #settings-popup button:focus,
        #settings-popup button:hover,
        #city-list-popup button:active,
        #city-list-popup button:focus,
        #city-list-popup button:hover {
            background: #157a36;
            color: #fff;
            transform: scale(1.05);
        }

        /* --- Footer --- */
        footer {
            background-color: #232323;
            padding: 20px;
            margin-top: 40px;
            width: 100%;
            border-top: 1px solid #333;
        }

        footer nav {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        footer nav a {
            color: #e0e0e0;
            text-decoration: none;
            font-weight: bold;
            font-size: 1em;
        }

        footer nav a:hover {
            color: #1B9E49;
        }

        /* --- Enhancements for iPhone Styling --- */
@media (max-width: 600px) {
  #search-container {
    max-width: 100%;
    margin: 15px auto;
    padding: 0 20px;
  }

  #city-search {
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 10px;
    background: #fdfdfd;
    color: #333;
    padding: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
  }

  #city-search:focus {
    border-color: #0056b3;
    box-shadow: 0 0 12px rgba(0, 86, 179, 0.5);
    background: #fff;
    -webkit-font-smoothing: antialiased;
  }

  #dropdown {
    max-height: 300px;
    overflow-y: auto;
    border: 2px solid #ccc;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    margin-top: 8px;
    animation: fadeIn 0.3s ease;
    -webkit-overflow-scrolling: touch;
  }

  #dropdown li {
    padding: 12px 18px;
    font-size: 15px;
    color: #333;
    text-align: right;
    transition: background 0.3s ease, color 0.3s ease;
  }

  #dropdown li:hover {
    background: #0056b3;
    color: #fff;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}