/* Style the Swiper slider */
.swiper-slide {
    width: 600px; /* Adjust width as needed */
    height: 400px; /* Adjust height as needed */
}

.swiper-pagination-bullet {
    background: #007bff; /* Customize bullet color */
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transition: transform 0.3s, background-color 0.3s;
}

.swiper-pagination-bullet-active {
    background: #0056b3; /* Darker bullet color when active */
    transform: scale(1.5); /* Enlarge active bullet */
}

.single-post h1, .single-post h2, .single-post h3, .single-post h4, .single-post h5, .single-post h6, .single-post .font-primary {
	text-transform: none;
}
h1, h2, h3, h4, h5, h6 {
	transform: none !important;
}
.wp-block-query .wp-block-post {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  display: block;
}

.wp-block-post-title {
  font-size: 18px;
  margin: 12px 0;
}

.wp-block-post-title a {
  color: #0b3b66;
  text-decoration: none;
}

.wp-block-post-excerpt {
  font-size: 14px;
  color: #333;
  margin-bottom: 12px;
}

.wp-block-read-more {
  color: #0066cc;
  font-weight: 600;
  text-decoration: none;
}
/* @media (min-width: 800px) {
	.col-lg-3.side_bar {
		width: 22.5% !important;
   }
	 .sidebar-page>.row>.col-lg-9 {
      width: 77.5% !important;
    }
} */
/* 
   PART 2: THE CSS STYLES (UPDATED)
   Paste this into: Appearance > Customize > Additional CSS
*/

/* Widget Container - Force Reset */
#agm-interpretation-widget {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding: 20px 0 !important;
    line-height: normal !important;
}

#agm-interpretation-widget * {
    box-sizing: border-box !important;
    max-width: none !important;
    /* Prevent WP from squashing elements */
}

/* Phone Frame */
#agm-interpretation-widget .phone-frame {
    width: 320px !important;
    height: 650px !important;
    background: #fff !important;
    border-radius: 40px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2), 0 0 0 12px #e0e0e0 !important;
    position: relative !important;
    overflow: hidden !important;
    border: 8px solid #000 !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 auto !important;
    padding: 0 !important;
    /* Re-add animation */
    animation: agmSlideUpPhone 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

#agm-interpretation-widget .notch {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 150px !important;
    height: 25px !important;
    background: #000 !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    z-index: 100 !important;
}

/* Header */
#agm-interpretation-widget .header-bar {
    height: 50px !important;
    background: linear-gradient(90deg, #002a5c, #0099cc) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    padding: 0 20px 10px 20px !important;
    color: white !important;
    padding-top: 25px !important;
    margin: 0 !important;
}

#agm-interpretation-widget .header-icon svg {
    width: 24px !important;
    height: 24px !important;
    fill: white !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    cursor: pointer;
    display: block !important;
}

/* Sub Header */
#agm-interpretation-widget .sub-header {
    padding: 10px 20px 5px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
}

#agm-interpretation-widget .back-icon {
    color: #0072bc !important;
    font-weight: bold !important;
    font-size: 14px !important;
    border: 1px solid #0072bc !important;
    border-radius: 4px !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#agm-interpretation-widget .brand-text {
    color: #0072bc !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    margin: 0 !important;
}

/* Tabs */
#agm-interpretation-widget .nav-tabs {
    display: flex !important;
    padding: 5px 10px !important;
    gap: 5px !important;
    border-bottom: 1px solid #eee !important;
    margin: 0 !important;
    width: 100% !important;
}

#agm-interpretation-widget .nav-item {
    flex: 1 !important;
    background: #f0f0f0 !important;
    border-radius: 4px !important;
    text-align: center !important;
    padding: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 50px !important;
    position: relative !important;
    list-style: none !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
}

#agm-interpretation-widget .nav-item.active {
    background: linear-gradient(180deg, #0099cc 0%, #0055a4 100%) !important;
    color: white !important;
}

#agm-interpretation-widget .nav-item.active svg {
    fill: white !important;
}

#agm-interpretation-widget .nav-item svg {
    width: 18px !important;
    height: 18px !important;
    fill: #aaa !important;
    margin-bottom: 3px !important;
    display: block !important;
}

#agm-interpretation-widget .nav-text {
    font-size: 7px !important;
    text-transform: uppercase !important;
    color: #aaa !important;
    margin-top: 2px !important;
    line-height: 1 !important;
}

#agm-interpretation-widget .nav-item.active .nav-text {
    color: white !important;
}

/* Content */
#agm-interpretation-widget .main-content {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 15px !important;
    padding-bottom: 40px !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Live Card */
#agm-interpretation-widget .live-card {
    display: flex !important;
    gap: 15px !important;
    margin-bottom: 25px !important;
    margin-top: 0 !important;
}

#agm-interpretation-widget .cover-img {
    width: 80px !important;
    height: 80px !important;
    background: #222 !important;
    border-radius: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 8px !important;
    position: relative !important;
    overflow: hidden !important;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAAAtCAIAAAAe4F+dAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAmISURBVHhe7ZgHVIxpH4avWfvT7I9d+9Pszj07u+d/6b333nvvvffeey+99957B6EggigqKCpFkSK9VwH7/3zP+M04YxAJiKCo5Jz3nPfMe9/5yie+8o1PfuXr869f/wL869e/AP/69S/Av379C/CvX/8C/OvXvwD/+vUvwL9+/Qvwr1//Avz7178A//r1L8C/fv0L8K9f/wL869e/AP/69S/Av379C/CvX/8C/OvXv/4F+NevfwH+9etfgH/9+hfgX7/+BfjXr38B/vXrX4B//foX4F+//gX4169/Af7161+Af/36F+Bfv/4F+NevfwH+9etfgH/9+hfgX7/+BfjXry/Av359Af716wvw7//zfwHE0QAGrW7F8AAAAABJRU5ErkJggg==') !important;
    background-size: cover !important;
    background-position: center !important;
    flex-shrink: 0 !important;
    /* Don't squash the image */
}

#agm-interpretation-widget .cover-img::after {
    content: "Session";
    position: absolute !important;
    bottom: 0 !important;
    width: 100% !important;
    background: #0072bc !important;
    text-align: center !important;
    padding: 2px 0 !important;
    font-weight: bold !important;
    line-height: normal !important;
}

#agm-interpretation-widget .card-details h1 {
    color: #0072bc !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
    margin-bottom: 5px !important;
    font-weight: 600 !important;
    margin-top: 0 !important;
}

#agm-interpretation-widget .card-details h1 span {
    color: #002a5c !important;
}

#agm-interpretation-widget .card-details p {
    font-size: 11px !important;
    color: #666 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

/* Language List */
#agm-interpretation-widget .section-title {
    color: #0072bc !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    margin-top: 0 !important;
    line-height: 1.2 !important;
}

/* Language List Items - Container */
#agm-interpretation-widget .lang-item {
    display: flex !important;
    align-items: center !important;
    /* Critical for Vertical Center */
    justify-content: space-between !important;
    padding: 10px 15px !important;
    margin-bottom: 12px !important;
    background: white !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 50px !important;
    /* Ensure consistent height */
}

/* Language Text */
#agm-interpretation-widget .lang-name {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #000 !important;
    line-height: 1 !important;
    /* Remove line-height deviations */
    flex: 1 !important;
    /* Take up available space */
}

/* Controls Wrapper */
#agm-interpretation-widget .controls {
    display: flex !important;
    align-items: center !important;
    /* Center buttons vertically */
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
}

/* Buttons (Circle) */
#agm-interpretation-widget .control-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    /* Use Flex, not Inline-Flex */
    align-items: center !important;
    /* Center SVG Vertically */
    justify-content: center !important;
    /* Center SVG Horizontally */
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: #0072bc !important;
    flex-shrink: 0 !important;
    /* Don't get squashed */
}

/* SVG Icons */
#agm-interpretation-widget .control-btn svg {
    width: 14px !important;
    height: 14px !important;
    fill: white !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Visual Correction for Play Triangle */
#agm-interpretation-widget .btn-play svg {
    margin-left: 2px !important;
}

/* TOGGLE LOGIC - FIXED */
/* Default: Play is Visible, Pause is Hidden */
#agm-interpretation-widget .btn-play {
    display: flex !important;
}

#agm-interpretation-widget .btn-pause {
    display: none !important;
}

/* Active State: Play is Hidden, Pause is Visible */
#agm-interpretation-widget .lang-item.active .btn-play {
    display: none !important;
}

#agm-interpretation-widget .lang-item.active .btn-pause {
    display: flex !important;
}

/* Equalizer */
#agm-interpretation-widget .equalizer {
    display: flex !important;
    align-items: flex-end !important;
    height: 12px !important;
    gap: 2px !important;
    margin-right: 5px !important;
    opacity: 0 !important;
    transition: opacity 0.3s !important;
}

#agm-interpretation-widget .lang-item.active .equalizer {
    opacity: 1 !important;
}

#agm-interpretation-widget .bar {
    width: 2px !important;
    background: #0072bc !important;
    animation: agmBounce 1s infinite !important;
}

#agm-interpretation-widget .bar:nth-child(1) {
    height: 40% !important;
    animation-delay: 0.1s !important;
}

#agm-interpretation-widget .bar:nth-child(2) {
    height: 80% !important;
    animation-delay: 0.2s !important;
}

#agm-interpretation-widget .bar:nth-child(3) {
    height: 50% !important;
    animation-delay: 0s !important;
}

/* Footer */
#agm-interpretation-widget .app-footer {
    height: 25px !important;
    background: #002a5c !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 10px !important;
    position: absolute !important;
    bottom: 0 !important;
    width: 100% !important;
    z-index: 10 !important;
}

@keyframes agmBounce {

    0%,
    100% {
        height: 30%;
    }

    50% {
        height: 100%;
    }
}

@keyframes agmSlideUpPhone {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes agmSlideInRight {
    0% {
        transform: translateX(-30px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

#agm-interpretation-widget .main-content::-webkit-scrollbar {
    width: 0 !important;
}