/**
 * Jewish DatePicker Custom Styling
 * Theme Colors: #FAFAFA, #D1E6E9, #B1B1B1, #006775, #474747
 * 
 * This file extends and overrides the vendor/jewishluach/css/jewishluach.css styles
 * to match the website theme without modifying the original library files.
 */

/* ============================================
   Override jewishluach.css with theme colors
   ============================================ */

/* Widget background */
.jewish-calendar-container .ll-skin-cangas .ui-widget {
    border: 0 none;
}

/* Active and hover states */
.jewish-calendar-container .ll-skin-cangas td .ui-state-hover {
    color: #000;
}

/* ============================================
   Wrapper and Language Selector
   ============================================ */

.jewish-calendar-container.ui-datepicker {
    display: block;
    width: auto;
    border: none;
    box-shadow: none;
    max-width: 400px;
    padding: 0;
}

.datepicker-header {
	box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.15);
	background: #F5F6F8;
	height: 33px;
	font-size: 18px;
	text-align: right;
	color: #727884;
	padding: 0 14px;
	line-height: 33px;
}
.datepicker-language-selector {
	border: 1px solid #727884;
	background: transparent;
	position: absolute;
	top: 3px;
	z-index: 9;
	width: 100px;
	height: 26px;
	border-radius: 50px;
}

.language-options {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}

.language-option {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 9px;
	font-weight: 500;
	margin: 0;
	line-height: 20px;
}

.language-option input[type="radio"] {
    display: none;
}

.language-option span {
	color: #727884;
	transition: color 0.2s ease;
	cursor: pointer;
	user-select: none;
	padding: 0 8px;
	border-radius: 25px;
}

.language-option input[type="radio"]:checked + span, .language-option span:hover {
	color: #fff;
	background: #727884;
}

.jewish-calendar-container .ui-datepicker-header {
	background: #727884;
	padding: 10px 0;
}

.jewish-calendar-container .ui-datepicker-title {
    color: #ffffff;
    font-weight: 600;
    font-size: 16px;
}

.jewish-calendar-container .ui-datepicker-prev,
.jewish-calendar-container .ui-datepicker-next {
    cursor: pointer;
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
    top: 15px;
}

.jewish-calendar-container .ui-datepicker-prev:hover,
.jewish-calendar-container .ui-datepicker-next:hover {
    background: transparent;
}

.jewish-calendar-container .ui-datepicker-calendar {
	width: 100%;
	border-collapse: separate;
	margin: 0;
	background: #D0D3D9;
	border-color: #D0D3D9;
	border-style: solid;
	border-width: 2px 10px 15px 3px;
}

.jewish-calendar-container .ui-datepicker-calendar thead th {
	background: #D0D3D9;
	color: #727884;
	font-weight: 700;
	padding: 8px 4px;
	text-align: center;
	font-size: 11px;
	border: 0 none;
	box-shadow: none;
	text-transform: none;
}

/* Today's date */
.jewish-calendar-container .ui-datepicker-calendar tbody td.ui-datepicker-today a {
    background: #D1E6E9;
    color: #006775;
    font-weight: 600;
}

/* Selected date */
.jewish-calendar-container .ui-datepicker-calendar tbody td a.ui-state-active {
	background: #FFFFFF;
	color: #000000;
	font-weight: 600;
	border-color: #727884;
}

.jewish-calendar-container .ui-datepicker-calendar tbody td .ui-state-highlight {
	background: #D0D3D9;
}

/* Month/Year selectors */
.jewish-calendar-container select {
    background: #FAFAFA;
    border: 1px solid #D1E6E9;
    border-radius: 4px;
    padding: 4px 8px;
    margin: 0 4px;
    color: #474747;
    cursor: pointer;
}

.jewish-calendar-container select:focus {
    outline: none;
    border-color: #006775;
}

/* Hebrew calendar specific styling */
.jewish-calendar-container[data-calendar-type="Hebrew"] {
    direction: rtl;
    text-align: right;
}

.jewish-calendar-container[data-calendar-type="Hebrew"] .ui-datepicker-prev {
    float: left;
}

.jewish-calendar-container[data-calendar-type="Hebrew"] .ui-datepicker-next {
    float: right;
}

/* Disable text selection */
.jewish-calendar-container {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .jewish-calendar-container {
        max-width: 90vw;
    }
}

/* Mobile positioning - stick calendar to bottom like keyboard */
@media (max-width: 767px) {
    body.open-calendar .jewish-datepicker-wrapper.calendar-open {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 16000 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
        display: flex !important;
        flex-direction: column !important;
        max-height: 70vh !important;
    }

    /* Calendar container inside wrapper - should not be fixed */
    body.open-calendar .jewish-datepicker-wrapper .jewish-calendar-container.ui-datepicker {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        flex: 1 !important;
        overflow-y: auto !important;
    }

    /* Ensure datepicker header stays at top */
    body.open-calendar .datepicker-header {
        position: relative !important;
        width: 100% !important;
        border-radius: 0 !important;
        flex-shrink: 0 !important;
    }

    body.open-calendar .block-right,
    body.open-calendar .block-left,
    body.open-calendar .preview,
    body.open-calendar .designer,
    body.open-calendar .designer_content {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Field styling for datepicker inputs */
.tab_item_value.jewish-date {
    cursor: pointer;
    position: relative;
}

.tab_item_value.jewish-date:focus {
    border-color: #006775;
    box-shadow: 0 0 0 3px rgba(0, 103, 117, 0.1);
}

/* Editor textarea with datepicker */
.editor_text.jewish-date {
    cursor: pointer;
    background: #FAFAFA;
}

.editor_text.jewish-date:hover {
    border-color: #006775;
}

.jewish-calendar-container .parshe-week .parsha-wrapper {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: center;
	font-size: 12px;
	line-height: 1;
}
.jewish-calendar-container .parshe-week .parsha-wrapper span:first-child {
    font-weight: 700;
}
.jewish-calendar-container .parshe-week .parsha-wrapper span:last-child {
    font-weight: 300;
}
/* Parsha wrapper responsive adjustments */
@media (max-width: 768px) {
    .jewish-calendar-container .parshe-week .parsha-wrapper {
        font-size: 10px;
    }
    
    .jewish-calendar-container .parshe-week .parsha-en {
        font-size: 10px;
    }
    
    .jewish-calendar-container .parshe-week .parsha-he {
        font-size: 9px;
    }
}

.ui-datepicker .ui-datepicker-prev {
	left: 20px;
}
.ui-datepicker .ui-datepicker-prev + .ui-datepicker-prev {
	left: 50px !important;
}
.ui-datepicker .ui-datepicker-title {
	margin: 0 48px;
}

.ui-datepicker .ui-datepicker-next {
	right: 20px;
}
.ui-datepicker .ui-datepicker-next + .ui-datepicker-next {
	right: 50px !important;
	padding: 4px;
}
.ll-skin-cangas .ui-datepicker-header .ui-state-hover {
	background: transparent;
	cursor: pointer;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
    border: 0 none;
}
.ll-skin-cangas td .ui-state-default {
	background: #F1F4F9;
	border: 2px solid #FFFFFF;
	width: 38px;
	height: 38px;
	border-radius: 50px;
	color: #727884;
    padding: 0;
    text-shadow: none;
}
.ll-skin-cangas .ui-datepicker td {
	background: transparent;
	border: 0 none;
	padding: 3px;
}
.ui-datepicker td .dual-day-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0;
	line-height: 1;
	height: 100%;
	width: 100%;
	font-weight: 400;
}
.ui-datepicker td span, .ui-datepicker td a {
	padding: 0;
}
.ui-datepicker td .dual-day-wrapper span:first-child {
    font-size: 15px;
}
.ui-datepicker td .dual-day-wrapper span:last-child {
    font-size: 11px;
    margin-top: 2px;
}
.ll-skin-cangas .ui-datepicker .parshe-week {
	background: transparent;
	border: 0 none;
	box-shadow: none;
	text-transform: none;
}
.ll-skin-cangas td.ui-state-disabled .ui-state-default {
	text-shadow: none;
	opacity: 1;
	color: #727884;
	background: transparent;
	border: 2px solid transparent;
}
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
	opacity: 1;
}
.datepicker-done {
	color: #727884;
	cursor: pointer;
}

.ll-skin-cangas .ui-datepicker .ui-datepicker-prev span {
	font-size: 0px;
	color: white;
	background: none;
	text-indent: 0px;
}
.ll-skin-cangas .ui-datepicker .ui-datepicker-prev span::before {
	content: "\f104";
	display: block;
	font-size: 15px;
	font-family: "Font Awesome 7 Pro";
}
.ll-skin-cangas .ui-datepicker .ui-datepicker-next span {
	font-size: 0px;
	color: white;
	background: none;
	text-indent: 0px;
}
.ll-skin-cangas .ui-datepicker .ui-datepicker-next span::before {
	content: "\f105";
	display: block;
	font-size: 15px;
	font-family: "Font Awesome 7 Pro";
}