/* Extracted from index2.php */
*, *::before, *::after
    {
    box-sizing: border-box;
    }

:root 
    {
    --primary: #4361ee;
    --primary-light: #4895ef;
    --secondary: #3f37c9;
    --accent: #4cc9f0;
    --background: #f8f9fa;
    --container: #ffffff;
    --text: #333333;
    --text-light: #6c757d;
    --shadow: rgba(0, 0, 0, 0.1);
    --highlight: rgba(67, 97, 238, 0.1);
    --border: rgba(0, 0, 0, 0.05);
    }

body 
    {
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    background: #f4f4f7;
    color: var(--text);
    line-height: 1.6;
    padding: 0px;
    margin: 0px;
    min-height: 100vh;
    }

.calculated-info 
    {
    border: 1.5px solid #e0e7ff;
    border-radius: 10px;
    padding: 16px 14px 10px 14px;
    background: #f7faff;
    box-shadow: 0 4px 20px var(--shadow);
	display:flex;
	flex-direction:column;
	gap:10px;
	}
	
.date-modifier
    {
    background-color: var(--container);
    border-radius: 16px;
    box-shadow: 0 4px 20px var(--shadow);
    border: 1px solid var(--border);
    }

.calculated-info:hover
    {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(70, 130, 180, 0.1);
    }
	
.date-modifier:hover
    {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(70, 130, 180, 0.1);
    }

h2 
    {
    color: var(--secondary);
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0px;
    }
	
	
.user-input-addtime,
.user-input-date-and-unixtime
    {
    width: 100%;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
	}
	
#displaydiv1 .user-input-addtime,
#displaydiv1 .user-input-date-and-unixtime
	{
	background-color: #f7faff;
	}
	
#displaydiv2 .user-input-addtime,
#displaydiv2 .user-input-date-and-unixtime
	{
	background-color: #fdf6fa;
	}
	
#displaydiv1 .user-input-addtime:focus,
#displaydiv1 .user-input-date-and-unixtime:focus
    {
    outline: 3.5px solid #5a8cff;
    background-color: white;
    }

#displaydiv2 .user-input-addtime:focus,
#displaydiv2 .user-input-date-and-unixtime:focus
    {
    outline: 3.5px solid #e573a6;
    background-color: white;
    }
	
#displaydiv1 .modifier-input-and-label.addtimeismodified
	{
	background:#b3c6ff;
	border-radius:4px;
	}
	
#displaydiv2 .modifier-input-and-label.addtimeismodified
	{
	background:#f8bbd0;
	border-radius:4px;
	}
	
.user-input-date-and-unixtime.invalid
    {
    background-color: #ffeaea;
	outline:10px solid red;
    }
	
.user-input-addtime
	{
	width: 90px;
	}

.date-shortcut-btn, button 
    {
    background: linear-gradient(145deg, var(--primary), var(--secondary));
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.12);
    position: relative;
    overflow: hidden;
    z-index: 1;
    }

.date-shortcut-btn:hover, button:hover 
    {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

.date-shortcut-btn:active, button:active 
    {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    }

.result-highlight 
    {
    font-weight: 500;
    color: var(--primary);
    }

.info-label 
    {
    color: var(--text);
    align-items: baseline;
    min-width: 0;
    }
	
table.info-label-table
	{
	margin:0px;
	border:0px;
	width:100%;
	}
table.info-label-table td.questionmark
	{
	width:1%;
	}
table.info-label-table td.info-label-two
	{
	width:99%;
	}

.info-label-text,
.result-highlight
    {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    }

.info-label-text
    {
    }

.info-note 
    {
    color: var(--text-light);
    }

/* Keep all unique index2.php styles below, do not remove them */

.display-table
    {
    max-width: 2200px;
    border-collapse: separate;
	display:flex;
	flex-direction: row;
	align-items: start;
	justify-content: center;
	gap:50px;
	width:100%
    }
.display-div 
    {
    min-width: 0;
    background: linear-gradient(120deg, #fff 80%, #e0e7ff 100%);
    border-radius: 18px;
    padding: 28px 24px 22px 24px;
    box-shadow: 0 6px 32px rgba(80, 112, 255, 0.10), 0 1.5px 6px rgba(0,0,0,0.04);
    border: 1.5px solid #e0e7ff;
    transition: box-shadow 0.2s;
    overflow: visible;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    word-break: normal;
	gap:33px;
	}

.td-blue .display-div:hover
    {
    box-shadow: 0 12px 40px rgba(80, 112, 255, 0.18), 0 2px 8px rgba(0,0,0,0.06);
    }
	
.td-rosy .display-div:hover
    {
    box-shadow: 0 12px 40px rgba(232, 115, 166, 0.18), 0 2px 8px rgba(201, 79, 124, 0.10);
    }
	
.main-input-and-buttons
	{
	display:flex;
	flex-direction:column;
	gap:3px;
	}

.date-modifier 
    {
    border: 1.5px solid #e0e7ff;
    border-radius: 8px;
    padding: 14px 12px 10px 12px;
    background: #f7faff;
	display:flex;
	flex-direction:column;
	gap:10px;
    }
.modifier-header 
    {
    }
.modifier-title-and-clear-button
    {
	display:flex;
	flex-direction:row;
	justify-content: space-between;
    font-weight: 600;
    color: #5070ff;
    font-size: 16px;
    letter-spacing: 0.5px;
    }
.modifier-inputs-allfour 
    {
    display: flex;
    flex-wrap: wrap;
	justify-content: space-evenly;
	flex-direction: row;
	align-items: center;
    }

.modifier-input-and-label
    {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
	border-radius:4x;
	background:none;
    font-size: 13px;
	padding:4px;
    }

.info-note 
    {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 15px;
    }
.info-outofbounds 
    {
    background-color: #fff3cd;
    border: 1.5px solid #ffeeba;
    color: #856404;
    display: none;
    }
	
.info-fullhugeitem
    {
    padding: 10px 12px;
    border-radius: 6px;
    background: #f0f4ff;
    position: relative;
    box-shadow: 0 1px 2px rgba(80,112,255,0.04);
    overflow: visible;
    }
.info-label 
    {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    font-size: 15px;
    color: #3a4668;
    }
.result-highlight 
    {
    font-weight: 600;
    color: #5070ff;
    font-size: 16px;
    }
.info-clickableQuestionmark
    {
    cursor: pointer;
    color: #5070ff;
    background: #e0e7ff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-weight: bold;
    font-size: 15px;
    box-shadow: 0 1px 2px rgba(80,112,255,0.08);
    transition: background 0.2s, color 0.2s;
    }

.info-question:hover
    {
    background: #5070ff;
    color: #fff;
    }
	
.info-descriptionBlock,
.info-thousandseparatedBlock,
.info-clockBlock
    {
    display: block;
    }
.info-descriptionBlock 
    {
    padding: 10px 12px;
    background: #e9ecef;
    border-radius: 5px;
    font-size: 14px;
    color: #3a4668;
    }
.date-shortcut-btn 
    {
    padding: 8px 18px;
    background: linear-gradient(90deg, #5070ff 60%, #7f9cff 100%);
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(80,112,255,0.10);
    transition: background 0.2s, box-shadow 0.2s;
    }

.date-shortcut-btn:hover 
    {
    background: linear-gradient(90deg, #4057c7 60%, #5070ff 100%);
    box-shadow: 0 2px 8px rgba(80,112,255,0.16);
    }
	
.week-list-result {
    margin-top: 10px;
    font-size: 14px;
    margin-left: 20px;
    }
.week-item {
    margin-bottom: 6px;
    padding: 6px 10px;
    border-radius: 4px;
    color: #3a4668;
    font-size: 14px;
    white-space: normal;
    word-break: keep-all;
    line-break: strict;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    overflow: visible;
    min-width: 0;
    width: max-content;
    }
.current-week {
    font-weight: bold;
    }
.weekstart-dropdownbox {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    margin-left: 20px;
    }
.weekstart-dropdownbox select {
    margin-left: 10px;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1.5px solid #bfcfff;
    background: #f7faff;
    font-size: 14px;
    }
.week-section {
    margin-top: 5px;
    }

.info-thousandseparatedBlock
    {
    font-family: monospace;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 6px 10px;
    margin-top: 4px;
    color: #222;
    font-size: 1em;
    line-height: 1.5;
    }

.info-thousandseparatedBlock > div
    {
    margin: 0;
    padding: 0;
    }

.info-clockBlock
    {
    font-family: monospace;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 6px 10px;
    margin-top: 4px;
    color: #222;
    font-size: 1em;
    line-height: 1.5;
    }

.info-clockBlock > div
    {
    margin: 0;
    padding: 0;
    }

/* Add constraint for info-questionmarkblock */
.info-questionmarkblock {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 10;
    background: white;
    border: 1px solid #e0e7ff;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(80, 112, 255, 0.15);
    padding: 10px;
    margin-top: 5px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Simple Modern Toggle Styles */
.trexy-toggle-container
    {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    margin-bottom: 32px;
    }
.trexy-toggle-switch
    {
    position: relative;
    display: inline-block;
    width: 64px;
    height: 36px;
    vertical-align: middle;
    margin-right: 14px;
    }
.trexy-toggle-switch input
    {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    cursor: pointer;
    }
.trexy-toggle-slider
    {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e6eaf3;
    border-radius: 36px;
    border: 1.5px solid #cfd8dc;
    box-shadow: 0 2px 8px rgba(80,112,255,0.08);
    transition: background 0.3s, border 0.3s, box-shadow 0.2s;
    z-index: 1;
    }
.trexy-toggle-switch input:checked + .trexy-toggle-slider
    {
    background: linear-gradient(90deg, #4895ef 0%, #4cc9f0 100%);
    border: 1.5px solid #4895ef;
    }
.trexy-toggle-slider:before
    {
    position: absolute;
    content: "";
    height: 28px;
    width: 28px;
    left: 4px;
    top: 4px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(80,112,255,0.13);
    transition: transform 0.3s cubic-bezier(.4,2,.6,1), background 0.2s;
    }
.trexy-toggle-switch input:checked + .trexy-toggle-slider:before
    {
    transform: translateX(28px);
    }
.trexy-toggle-switch input:focus + .trexy-toggle-slider,
.trexy-toggle-switch input:hover + .trexy-toggle-slider
    {
    box-shadow: 0 0 0 4px #4895ef33, 0 2px 8px rgba(80,112,255,0.13);
    }

.trexy-toggle-label
    {
    font-size: 1.13rem;
    color: var(--secondary);
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    user-select: none;
    font-family: inherit;
    text-shadow: none;
    }


/* Hide date2 td and datediffdiv when toggled off */
.hide-date2 .td-rosy,
.hide-date2 #datediffdiv1
    {
    display: none !important;
    }

/* Center displaydiv1 when only it is visible */
.hide-date2 .display-table
    {
    justify-content: center;
    display: flex;
    }
.hide-date2 #displaydiv1
    {
    }

/* Softer pastel rosy theme for date2 */
#displaydiv2
    {
    background: linear-gradient(120deg, #fff7fa 80%, #fbeff3 100%);
    border: 1.5px solid #f3c6d3;
    }
#displaydiv2 h2,
#displaydiv2 .modifier-title-and-clear-button,
#displaydiv2 .info-label,
#displaydiv2 .result-highlight
    {
    color: #c94f7c;
    }
#displaydiv2 .user-input,
#displaydiv2 .modifier-input,
#displaydiv2 .date-modifier,
#displaydiv2 .calculated-info
    {
    background: #fdf6fa;
    border-color: #f3c6d3;
    }
#displaydiv2 .date-shortcut-btn,
#displaydiv2 button
    {
    background: linear-gradient(145deg, #f8bbd0, #e573a6);
    color: #fff;
    }
#displaydiv2 .date-shortcut-btn:hover,
#displaydiv2 button:hover
    {
    background: linear-gradient(145deg, #e573a6, #f8bbd0);
    }
#displaydiv2 .info-fullhugeitem
    {
    background: #fbeff3;
    }
#displaydiv2 .info-clickableQuestionmark
    {
    background: #f8bbd0;
    color: #c94f7c;
    box-shadow: 0 1px 2px #f8bbd055;
    }
#displaydiv2 .info-clickableQuestionmark:hover
    {
    background: #e573a6;
    color: #fff;
    }

/* Sunflower + grass theme for date diff */
#datediffdiv1
    {
    max-width: 1150px;
	width:100%;
    overflow: hidden;
    background: linear-gradient(180deg, #b3e0ff 0%, #e0f7fa 40%, #fffbe6 80%, #ffe9b6 100%);
    border: 2.5px solid #7ecbff;
    box-shadow: 0 8px 32px rgba(255, 224, 102, 0.13), 0 2px 8px rgba(0,0,0,0.04);
	padding: 28px 24px 22px 24px;
    }

.datediff-title-row
    {
    background: none;
    color: #222a33;
    width: 100%;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.01em;
    margin: 0;
    }
.datediff-title-row h2
    {
    margin: 0;
    padding: 0;
    color: #000;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    background: none;
    box-shadow: none;
    border-radius: 0;
    }

#datediffdiv1 h2,
#timediffdiv1 h2
    {
    width: 100%;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.01em;
    }

/* Sun + beach theme for time diff */
#timediffdiv1
    {
    background: linear-gradient(120deg, #fffdfa 0%, #f7e9f0 50%, #e3f0ff 100%);
    border: 2.5px solid #e8d6c3;
    box-shadow: 0 8px 32px rgba(232, 214, 195, 0.13), 0 2px 8px rgba(180, 200, 255, 0.07);
    margin: 0px;
    max-width: 1150px;
    padding: 28px 24px 22px 24px;
	width:100%;
    }
#timediffdiv1::before
    {
    content: '';
    position: absolute;
    left: 16px;
    top: 16px;
    width: 48px;
    height: 48px;
    background: url('data:image/svg+xml;utf8,<svg width="48" height="48" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.18"> <ellipse cx="60" cy="30" rx="10" ry="28" fill="%23ffe066" transform="rotate(0 60 60)"/> <ellipse cx="60" cy="30" rx="10" ry="28" fill="%23ffe066" transform="rotate(30 60 60)"/> <ellipse cx="60" cy="30" rx="10" ry="28" fill="%23ffe066" transform="rotate(60 60 60)"/> <ellipse cx="60" cy="30" rx="10" ry="28" fill="%23ffe066" transform="rotate(90 60 60)"/> <ellipse cx="60" cy="30" rx="10" ry="28" fill="%23ffe066" transform="rotate(120 60 60)"/> <ellipse cx="60" cy="30" rx="10" ry="28" fill="%23ffe066" transform="rotate(150 60 60)"/> <ellipse cx="60" cy="30" rx="10" ry="28" fill="%23ffe066" transform="rotate(180 60 60)"/> <ellipse cx="60" cy="30" rx="10" ry="28" fill="%23ffe066" transform="rotate(210 60 60)"/> <ellipse cx="60" cy="30" rx="10" ry="28" fill="%23ffe066" transform="rotate(240 60 60)"/> <ellipse cx="60" cy="30" rx="10" ry="28" fill="%23ffe066" transform="rotate(270 60 60)"/> <ellipse cx="60" cy="30" rx="10" ry="28" fill="%23ffe066" transform="rotate(300 60 60)"/> <ellipse cx="60" cy="30" rx="10" ry="28" fill="%23ffe066" transform="rotate(330 60 60)"/> </g><circle cx="60" cy="60" r="18" fill="%23b08968" opacity="0.18"/></svg>') no-repeat center/contain;
    pointer-events: none;
    z-index: 0;
    }
#timediffdiv1 > *
    {
    position: relative;
    z-index: 1;
    }

.timediff-title-row
    {
    width: 100%;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.01em;
    margin: 0;
    }
.timediff-title-row h2
    {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    background: none;
    box-shadow: none;
    border-radius: 0;
    }
.timediff-content-row
    {
    }

/* Border radius utility classes for diff divs */
.diffdiv-rounded-all
    {
    border-radius: 18px;
    }
.diffdiv-rounded-top
    {
    border-radius: 18px 18px 0 0;
    }
.diffdiv-rounded-bottom
    {
    border-radius: 0 0 18px 18px;
    }

.main-header
    {
    text-align: center;
    padding-top: 10px;
    }
.main-title
    {
    font-size: 2.5rem;
    font-weight: 800;
    color: #3f37c9;
    letter-spacing: 0.01em;
    letter-spacing: 0.01em;
    margin-bottom: 10px;
	margin-top: 0px;
    text-shadow: 0 2px 8px #b3e0ff55;
    }

/* Dynamic backgrounds for diff divs */
.beach-sky-bg
    {
    background: linear-gradient(180deg, #b3e0ff 0%, #e0f7fa 40%, #fff 100%);
    }
.beach-sand-bg
    {
    background: linear-gradient(120deg, #fffbe6 0%, #ffe9b6 60%, #ffe0b2 100%);
    }

#datediffdiv1.beach-sky-bg
    {
    background: linear-gradient(180deg, #b3e0ff 0%, #e0f7fa 40%, #fff 100%) !important;
    border: 2.5px solid #7ecbff !important;
    }
#timediffdiv1.beach-sand-bg
    {
    background: linear-gradient(120deg, #fffbe6 0%, #ffe9b6 60%, #ffe0b2 100%) !important;
    }

/* --- Additions and improvements for mobile flexibility --- */


/* --- End mobile flexibility improvements --- */

/* --- Button jump and space collapse improvements --- */

.date-shortcuts-allfive,
.modifier-inputs-allfour, 
.weekday-checkboxes
    {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
	align-items: center;
	flex-direction: row;
	justify-content:start;
    }
	
.date-shortcuts-allfive > *,
.modifier-inputs-allfour > *
    {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    }

.date-shortcut-btn,
button
    {
    margin: 0 0 0 0;
    transition: transform 0.18s cubic-bezier(.4,2,.6,1), box-shadow 0.18s;
    position: relative;
    z-index: 1;
    }

.date-shortcut-btn:nth-child(odd),
button:nth-child(odd)
    {
    }
.date-shortcut-btn:nth-child(even),
button:nth-child(even)
    {
    }
.date-shortcut-btn:active,
button:active
    {
    transform: scale(0.97) translateY(0);
    }

/* --- End button jump and space collapse improvements --- */

/* --- Fix button/checkbox wrapping and week text wrapping --- */

.date-shortcut-btn,
button
    {
    width: auto;
    min-width: min-content;
    max-width: 100%;
    margin: 0 0 0 0;
    }
.weekday-checkboxes label
    {
    flex: 0 1 auto;
    min-width: 0;
    white-space: normal;
    }
.week-list-result,
.week-item
    {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    width: auto !important;
    max-width: 100%;
    }
.week-item
    {
    display: block;
    }


/* --- End fix button/checkbox wrapping and week text wrapping --- */

/* Classes extracted from inline styles */
.showdate2 .td-blue-or-rosy
    {
	max-width:777px;
	width:50%;
    }
	
.hide-date2 .td-blue
	{
	width:100%;
	max-width:888px;
	}

.clear-modifier-btn
    {
    margin-left: auto;
    }

.datediff-result
    {
    font-size: 16px;
    line-height: 1.7;
    }

.timediff-result
    {
    font-size: 16px;
    line-height: 1.7;
    }

.add-one-day-label
    {
    font-size: 15px;
    font-weight: 500;
    }

.add-one-day-checkbox
    {
    margin-right: 6px;
    vertical-align: middle;
    }

.nowrap-span
    {
    }

.weekday-counter-label
    {
    margin-right: 8px;
    }

/* Debug/test output classes */
.debug-text-red
    {
    color: red;
    }

.debug-text-blue
    {
    color: blue;
    }

.debug-text-green
    {
    color: green;
    }

.small-font
    {
    font-size: 0.8em;
    }
	
div.alldivs
	{
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap:100px;
    margin: 20px 20px 0px 20px;
	}
	
div.diffs
	{
	display:flex;
	flex-direction:column;
	gap:0px;
	}
	
div.main-input-and-modifier
	{
	display:flex;
	flex-direction:column;
	gap:20px;
	}

@media (max-width:750px)
    {
    .display-table
        {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100% !important;
        margin: 0 auto !important;
        border-spacing: 0 !important;
        border-collapse: unset !important;
        }
    .display-table .td-blue,
    .display-table .td-rosy
        {
        display: block;
        box-sizing: border-box;
        }
    .display-table .td-blue
        {
        order: 1;
        }
    .display-table .td-rosy
        {
        order: 2;
        }
    } 

.footer-suggestion
    {
    }

.footer
    {
    margin-top:120px;
    border-top: 5px solid #c0c0c0;
    }

.footer-button-group-container-gradient
    {
    background: linear-gradient(to bottom, #d5d5d5 0%, #ffffff 100%);
    }

.footer-button-group-container-stripes
    {
        padding:50px;
        top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,1) 0px, rgba(255,255,255,1) 2px, transparent 2px, transparent 6px);
    }

.footer-button-group
    {
    display:flex;
    flex-direction: row;
    gap:10px;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    }

.suggestion-link-btn {
    display: inline-block;
    padding: 0.5em 1.2em;
    background: #0074d9;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    transition: background 0.2s, transform 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
}
.suggestion-link-btn:hover {
    background: #005fa3;
    transform: translate(4px,4px);
    box-shadow: 0px 0px 16px rgba(0,116,217,0.5);
}

/* Footer styles */
.ytfooter-youtube-btn {
    display: inline-block;
    padding: 0.7em 1.5em 0.7em 1.1em;
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    background: #cc0000;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s ease, box-shadow 0.2s ease;
    letter-spacing: 0.02em;
    vertical-align: middle;
    box-shadow: 0px 4px 6px rgba(204,0,0,0.3);
}
.ytfooter-youtube-btn:hover, .ytfooter-youtube-btn:focus {
    background: #a80000;
    transform: translate(4px,4px);
    box-shadow: 0px 0px 16px rgba(204,0,0,0.5);
    color: #fff;
    text-decoration: none;
}

.donate-btn
    {
    display: inline-block;
    padding: 0.7em 1.5em 0.7em 1.1em;
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    background: #27ae60;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s ease, box-shadow 0.2s ease;
    letter-spacing: 0.02em;
    vertical-align: middle;
    box-shadow: 0px 4px 6px rgba(39,174,96,0.3);
}
.donate-btn:hover, .donate-btn:focus
    {
    background: #219150;
    transform: translate(4px,4px);
    box-shadow: 0px 0px 16px rgba(39,174,96,0.5);
    color: #fff;
    text-decoration: none;
    }


/* Comment form styles */
.commentpg-body {
    font-family: sans-serif;
    background: #f8f8f8;
    margin: 0px;
    pixel:0px;
}
.commentpg-form-container {
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 20px 20px 0px 20px;

}

.commentpg-form {
    background: #fff;
    padding: 1.5em;
    border-radius: 8px;
    width: 50%;
    box-shadow: 0 2px 8px #ccc;
}
.commentpg-textarea {
    width: 100%;
    min-height: 80px;
}
.commentpg-success {
    color: green;
    margin-bottom: 1em;
}
.commentpg-error {
    color: red;
    margin-bottom: 1em;
}
.commentpg-label {
    display: block;
    margin-top: 1em;
}
.commentpg-button {
    margin-top: 1em;
    display: inline-block;
    padding: 0.7em 1.5em;
    background: #524ae9;
    color: #fff;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
}

.commentpg-button:hover {
    background: #3f37c9;
    transform: translate(4px,4px);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}

.footer-icon
    {
    height: 2.5em;
    margin-right: 0.5em;
    vertical-align: middle;
    display: inline-block;
    filter: brightness(0) invert(1);
    filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(0,0,0,0.18));
    }

.footer-icon-clef
    {
    /* Custom tweaks for clef icon if needed */
    }

.footer-icon-cup
    {
    /* Custom tweaks for cup icon if needed */
    }

.footer-icon-comment
    {
    /* Custom tweaks for comment icon if needed */
    }