:root {
    --dial-size: 56px;
    --sub-size: 50px;
    --gap: 12px;
    --accent: #FFD700;
}

/* Container fixed at bottom right */
.speed-dial-container {
    position: fixed;
    bottom: 15px;
    right: 15px;
    bottom: max(15px, env(safe-area-inset-bottom));
    right: max(15px, env(safe-area-inset-right));
    z-index: 9999;
    display: flex;
    flex-direction: column;
    /* Fixes floating trigger */
    align-items: center;
    gap: var(--gap);
}

/* Base Button Style */
.dial-btn {
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: #1a1a1a;
    text-decoration: none;
    /* for <a> tags */
}

/* Main Trigger */
.main-trigger {
    width: var(--dial-size);
    height: var(--dial-size);
    background: var(--accent);
    font-size: 1.5rem;
    position: relative;
    z-index: 2002;
    opacity: 0.8;
}

.main-trigger:hover,
.speed-dial-container.active .main-trigger {
    transform: scale(1.1);
    opacity: 1;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
}

/* Icon swap animation */
.main-trigger i {
    position: absolute;
    transition: all 0.3s ease;
}

.main-trigger .close-icon {
    opacity: 0;
    transform: rotate(-90deg);
}

.speed-dial-container.active .main-trigger .ph-list {
    opacity: 0;
    transform: rotate(90deg);
}

.speed-dial-container.active .main-trigger .close-icon {
    opacity: 1;
    transform: rotate(0);
}

/* Actions Wrapper */
.dial-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 15px;
    position: relative;
    z-index: 2001;
    pointer-events: none;
    /* Click through when hidden */
}

.speed-dial-container.active .dial-actions {
    pointer-events: auto;
}

/* Sub Buttons */
.sub-btn {
    width: var(--sub-size);
    height: var(--sub-size);
    background: #2b3038;
    /* Dark grey */
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.3rem;

    /* Animation defaults: hidden and pushed down */
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    transition: all 0.3s ease;
}

.sub-btn:hover {
    background: #3b4048;
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.1) !important;
    /* Override translate on hover if active */
}

/* Active State Animation */
.speed-dial-container.active .sub-btn {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Staggered Delay based on index */
/* We used style="--d: N" in HTML for order. */
.speed-dial-container.active .sub-btn:nth-child(1) {
    transition-delay: 0.05s;
}

.speed-dial-container.active .sub-btn:nth-child(2) {
    transition-delay: 0.1s;
}

.speed-dial-container.active .sub-btn:nth-child(3) {
    transition-delay: 0.15s;
}

.speed-dial-container.active .sub-btn:nth-child(4) {
    transition-delay: 0.2s;
}

/* Styling specific icons */
.sub-btn i {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    color: #ffffff !important;
}

/* Reset page paddings previously added for drawer */
body {
    padding-top: 20px;
    /* Standard padding */
}